jebus/enviPy-bayer
1
0
Fork 0
forked from enviPath/enviPy
Code Issues Pull Requests Actions Releases Activity

Compare commits

base: jebus:d584791ee89428c281875ee84562ce73cec3b290
Branches Tags
jebus:develop jebus:fix/ketcher_submission jebus:fix/issue204 jebus:hotfix/login jebus:refactor/html_formatting jebus:fix/missing_nav_links jebus:feat/package_pred jebus:fix/frontpage_predict jebus:fix/search jebus:feature/leftovers jebus:enhancement/licenses jebus:feature/frontend_update jebus:fix/xss jebus:enhancement/dataset jebus:feature/engineered_pathways jebus:feature/tenants jebus:feature/manager_tests jebus:feature/normalization_rules jebus:main
jebus:beta_2025-11-12 jebus:pre_frontpage_update jebus:beta_2025-10-15 jebus:beta_2025-09-18 jebus:beta_2025-09-04 jebus:beta_2025-09-02 jebus:beta_2025-08-25 jebus:beta_#1
..
compare: jebus:feature/leftovers
Branches Tags
jebus:develop jebus:fix/ketcher_submission jebus:fix/issue204 jebus:hotfix/login jebus:refactor/html_formatting jebus:fix/missing_nav_links jebus:feat/package_pred jebus:fix/frontpage_predict jebus:fix/search jebus:feature/leftovers jebus:enhancement/licenses jebus:feature/frontend_update jebus:fix/xss jebus:enhancement/dataset jebus:feature/engineered_pathways jebus:feature/tenants jebus:feature/manager_tests jebus:feature/normalization_rules jebus:main
jebus:beta_2025-11-12 jebus:pre_frontpage_update jebus:beta_2025-10-15 jebus:beta_2025-09-18 jebus:beta_2025-09-04 jebus:beta_2025-09-02 jebus:beta_2025-08-25 jebus:beta_#1

1 Commits
d584791ee8 ... feature/le

Author SHA1 Message Date
Tim Lorsbach
95d16690ef added retrain code 2025-11-11 20:38:13 +01:00
123 changed files with 7710 additions and 11528 deletions
Expand all files Collapse all files

6
epdb/tasks.py
View File

@ -1,15 +1,15 @@
import csv import csv
import io import io
import logging import logging
from datetime import datetime
from typing import Any, Callable, List, Optional from typing import Any, Callable, List, Optional
from uuid import uuid4 from uuid import uuid4
from celery import shared_task from celery import shared_task
from celery.utils.functional import LRUCache from celery.utils.functional import LRUCache
from django.utils import timezone
from epdb.logic import SPathway from epdb.logic import SPathway
from epdb.models import Edge, EPModel, JobLog, Node, Package, Pathway, Rule, Setting, User from epdb.models import EPModel, JobLog, Node, Package, Pathway, Rule, Setting, User, Edge
logger = logging.getLogger(__name__) logger = logging.getLogger(__name__)
ML_CACHE = LRUCache(3) # Cache the three most recent ML models to reduce load times. ML_CACHE = LRUCache(3) # Cache the three most recent ML models to reduce load times.
@ -29,7 +29,7 @@ def dispatch_eager(user: "User", job: Callable, *args, **kwargs):
log.task_id = uuid4() log.task_id = uuid4()
log.job_name = job.__name__ log.job_name = job.__name__
log.status = "SUCCESS" log.status = "SUCCESS"
log.done_at = timezone.now() log.done_at = datetime.now()
log.task_result = str(x) if x else None log.task_result = str(x) if x else None
log.save() log.save()

5
epdb/urls.py
View File

@ -142,11 +142,6 @@ urlpatterns = [
v.package_pathway, v.package_pathway,
name="package pathway detail", name="package pathway detail",
), ),
re_path(
rf"^package/(?P<package_uuid>{UUID})/predict$",
v.package_predict_pathway,
name="package predict pathway",
),
# Pathway Nodes # Pathway Nodes
re_path( re_path(
rf"^package/(?P<package_uuid>{UUID})/pathway/(?P<pathway_uuid>{UUID})/node$", rf"^package/(?P<package_uuid>{UUID})/pathway/(?P<pathway_uuid>{UUID})/node$",

16
epdb/views.py
View File

@ -374,22 +374,6 @@ def predict_pathway(request):
return render(request, "predict_pathway.html", context) return render(request, "predict_pathway.html", context)
@package_permission_required()
def package_predict_pathway(request, package_uuid):
"""Package-specific predict pathway view."""
if request.method != "GET":
return HttpResponseNotAllowed(["GET"])
current_user = _anonymous_or_real(request)
current_package = PackageManager.get_package_by_id(current_user, package_uuid)
context = get_base_context(request)
context["title"] = f"enviPath - {current_package.name} - Predict Pathway"
context["meta"]["current_package"] = current_package
return render(request, "predict_pathway.html", context)
def packages(request): def packages(request):
current_user = _anonymous_or_real(request) current_user = _anonymous_or_real(request)

11
templates/actions/collections/compound.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_compound_modal"> <a role="button" data-toggle="modal" data-target="#new_compound_modal">
<span class="glyphicon glyphicon-plus"></span> New Compound</a <span class="glyphicon glyphicon-plus"></span> New Compound</a>
> </li>
</li> {% endif %}
{% endif %}

15
templates/actions/collections/compound_structure.html
View File

@ -1,11 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a <a role="button" data-toggle="modal" data-target="#new_compound_structure_modal">
role="button" <span class="glyphicon glyphicon-plus"></span> New Compound Structure</a>
data-toggle="modal" </li>
data-target="#new_compound_structure_modal" {% endif %}
>
<span class="glyphicon glyphicon-plus"></span> New Compound Structure</a
>
</li>
{% endif %}

11
templates/actions/collections/edge.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_edge_modal"> <a role="button" data-toggle="modal" data-target="#new_edge_modal">
<span class="glyphicon glyphicon-plus"></span> New Edge</a <span class="glyphicon glyphicon-plus"></span> New Edge</a>
> </li>
</li> {% endif %}
{% endif %}

5
templates/actions/collections/group.html
View File

@ -1,5 +1,4 @@
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_group_modal"> <a role="button" data-toggle="modal" data-target="#new_group_modal">
<span class="glyphicon glyphicon-plus"></span> New Group</a <span class="glyphicon glyphicon-plus"></span> New Group</a>
>
</li> </li>

9
templates/actions/collections/model.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit and meta.enabled_features.MODEL_BUILDING %} {% if meta.can_edit and meta.enabled_features.MODEL_BUILDING %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_model_modal"> <a role="button" data-toggle="modal" data-target="#new_model_modal">
<span class="glyphicon glyphicon-plus"></span> New Model</a <span class="glyphicon glyphicon-plus"></span> New Model</a>
> </li>
</li>
{% endif %} {% endif %}

11
templates/actions/collections/node.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_node_modal"> <a role="button" data-toggle="modal" data-target="#new_node_modal">
<span class="glyphicon glyphicon-plus"></span> New Node</a <span class="glyphicon glyphicon-plus"></span> New Node</a>
> </li>
</li> {% endif %}
{% endif %}

22
templates/actions/collections/package.html
View File

@ -1,20 +1,12 @@
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_package_modal"> <a role="button" data-toggle="modal" data-target="#new_package_modal">
<span class="glyphicon glyphicon-plus"></span> New Package</a <span class="glyphicon glyphicon-plus"></span> New Package</a>
>
</li> </li>
<li> <li>
<a role="button" data-toggle="modal" data-target="#import_package_modal"> <a role="button" data-toggle="modal" data-target="#import_package_modal">
<span class="glyphicon glyphicon-import"></span> Import Package from JSON</a <span class="glyphicon glyphicon-import"></span> Import Package from JSON</a>
>
</li> </li>
<li> <li>
<a <a role="button" data-toggle="modal" data-target="#import_legacy_package_modal">
role="button" <span class="glyphicon glyphicon-import"></span> Import Package from legacy JSON</a>
data-toggle="modal" </li>
data-target="#import_legacy_package_modal"
>
<span class="glyphicon glyphicon-import"></span> Import Package from legacy
JSON</a
>
</li>

11
templates/actions/collections/pathway.html
View File

@ -1,9 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a <a href="{{ meta.server_url }}/predict">
href="{% if meta.current_package %}{{ meta.current_package.url }}/predict{% else %}{{ meta.server_url }}/predict{% endif %}" <span class="glyphicon glyphicon-plus"></span> New Pathway</a>
> </li>
<span class="glyphicon glyphicon-plus"></span> New Pathway</a
>
</li>
{% endif %} {% endif %}

11
templates/actions/collections/reaction.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_reaction_modal"> <a role="button" data-toggle="modal" data-target="#new_reaction_modal">
<span class="glyphicon glyphicon-plus"></span> New Reaction</a <span class="glyphicon glyphicon-plus"></span> New Reaction</a>
> </li>
</li> {% endif %}
{% endif %}

9
templates/actions/collections/rule.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_rule_modal"> <a role="button" data-toggle="modal" data-target="#new_rule_modal">
<span class="glyphicon glyphicon-plus"></span> New Rule</a <span class="glyphicon glyphicon-plus"></span> New Rule</a>
> </li>
</li>
{% endif %} {% endif %}

11
templates/actions/collections/scenario.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_scenario_modal"> <a role="button" data-toggle="modal" data-target="#new_scenario_modal">
<span class="glyphicon glyphicon-plus"></span> New Scenario</a <span class="glyphicon glyphicon-plus"></span> New Scenario</a>
> </li>
</li> {% endif %}
{% endif %}

11
templates/actions/collections/setting.html
View File

@ -1,7 +1,6 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#new_setting_modal"> <a role="button" data-toggle="modal" data-target="#new_setting_modal">
<span class="glyphicon glyphicon-plus"></span>New Setting</a <span class="glyphicon glyphicon-plus"></span>New Setting</a>
> </li>
</li> {% endif %}
{% endif %}

67
templates/actions/objects/compound.html
View File

@ -1,43 +1,32 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_compound_modal"> <a role="button" data-toggle="modal" data-target="#edit_compound_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Compound</a <i class="glyphicon glyphicon-edit"></i> Edit Compound</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#add_structure_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Add Structure</a>
<a role="button" data-toggle="modal" data-target="#add_structure_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> Add Structure</a <li>
> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<li> </li>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> <li>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
> <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
</li> </li>
<li>
<a
role="button"
data-toggle="modal"
data-target="#generic_set_external_reference_modal"
>
<i class="glyphicon glyphicon-plus"></i> Set External Reference</a
>
</li>
{% endif %} {% endif %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#generic_copy_object_modal"> <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
<i class="glyphicon glyphicon-duplicate"></i> Copy</a <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
> </li>
</li>
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a <i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
> </li>
</li>
{% endif %} {% endif %}

53
templates/actions/objects/compound_structure.html
View File

@ -1,35 +1,22 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a <a role="button" data-toggle="modal" data-target="#edit_compound_structure_modal">
role="button" <i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a>
data-toggle="modal" </li>
data-target="#edit_compound_structure_modal" <li>
> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a <li>
> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
</li> <i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</a>
<li> </li>
<a
role="button"
data-toggle="modal"
data-target="#generic_set_external_reference_modal"
>
<i class="glyphicon glyphicon-plus"></i> Set External Reference</a
>
</li>
<li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</a
>
</li>
{% endif %} {% endif %}

27
templates/actions/objects/edge.html
View File

@ -1,17 +1,14 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a </li>
> <li>
</li> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<li> <i class="glyphicon glyphicon-trash"></i> Delete Edge</a>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> </li>
<i class="glyphicon glyphicon-trash"></i> Delete Edge</a
>
</li>
{% endif %} {% endif %}

18
templates/actions/objects/group.html
View File

@ -1,12 +1,10 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_group_member_modal"> <a role="button" data-toggle="modal" data-target="#edit_group_member_modal">
<i class="glyphicon glyphicon-trash"></i> Add/Remove Member</a <i class="glyphicon glyphicon-trash"></i> Add/Remove Member</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#generic_delete_modal">
<a role="button" data-toggle="modal" data-target="#generic_delete_modal"> <i class="glyphicon glyphicon-trash"></i> Delete Group</a>
<i class="glyphicon glyphicon-trash"></i> Delete Group</a </li>
> {% endif %}
</li>
{% endif %}

38
templates/actions/objects/model.html
View File

@ -1,22 +1,18 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_model_modal"> <a role="button" data-toggle="modal" data-target="#edit_model_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Model</a <i class="glyphicon glyphicon-edit"></i> Edit Model</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#evaluate_model_modal">
<a role="button" data-toggle="modal" data-target="#evaluate_model_modal"> <i class="glyphicon glyphicon-ok"></i> Evaluate Model</a>
<i class="glyphicon glyphicon-ok"></i> Evaluate Model</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#retrain_model_modal">
<li> <i class="glyphicon glyphicon-repeat"></i> Retrain Model</a>
<a role="button" data-toggle="modal" data-target="#retrain_model_modal"> </li>
<i class="glyphicon glyphicon-repeat"></i> Retrain Model</a <li>
> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
</li> <i class="glyphicon glyphicon-trash"></i> Delete Model</a>
<li> </li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> {% endif %}
<i class="glyphicon glyphicon-trash"></i> Delete Model</a
>
</li>
{% endif %}

36
templates/actions/objects/node.html
View File

@ -1,22 +1,18 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_node_modal"> <a role="button" data-toggle="modal" data-target="#edit_node_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Node</a <i class="glyphicon glyphicon-edit"></i> Edit Node</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a <li>
> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
</li> <i class="glyphicon glyphicon-trash"></i> Delete Node</a>
<li> </li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Node</a
>
</li>
{% endif %} {% endif %}

60
templates/actions/objects/package.html
View File

@ -1,36 +1,26 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_package_modal"> <a role="button" data-toggle="modal" data-target="#edit_package_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Package</a <i class="glyphicon glyphicon-edit"></i> Edit Package</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#edit_package_permissions_modal">
<a <i class="glyphicon glyphicon-user"></i> Edit Permissions</a>
role="button" </li>
data-toggle="modal" <li>
data-target="#edit_package_permissions_modal" <a role="button" data-toggle="modal" data-target="#publish_package_modal">
> <i class="glyphicon glyphicon-bullhorn"></i> Publish Package</a>
<i class="glyphicon glyphicon-user"></i> Edit Permissions</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#export_package_modal">
<li> <i class="glyphicon glyphicon-bullhorn"></i> Export Package as JSON</a>
<a role="button" data-toggle="modal" data-target="#publish_package_modal"> </li>
<i class="glyphicon glyphicon-bullhorn"></i> Publish Package</a <li>
> <a role="button" data-toggle="modal" data-target="#set_license_modal">
</li> <i class="glyphicon glyphicon-duplicate"></i> License</a>
<li> </li>
<a role="button" data-toggle="modal" data-target="#export_package_modal"> <li>
<i class="glyphicon glyphicon-bullhorn"></i> Export Package as JSON</a <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
> <i class="glyphicon glyphicon-trash"></i> Delete Package</a>
</li> </li>
<li> {% endif %}
<a role="button" data-toggle="modal" data-target="#set_license_modal">
<i class="glyphicon glyphicon-duplicate"></i> License</a
>
</li>
<li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Package</a
>
</li>
{% endif %}

143
templates/actions/objects/pathway.html
View File

@ -1,92 +1,59 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a class="button" data-toggle="modal" data-target="#add_pathway_node_modal"> <a class="button" data-toggle="modal" data-target="#add_pathway_node_modal">
<i class="glyphicon glyphicon-plus"></i> Add Compound</a <i class="glyphicon glyphicon-plus"></i> Add Compound</a>
> </li>
</li> <li>
<li> <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">
<a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal"> <i class="glyphicon glyphicon-plus"></i> Add Reaction</a>
<i class="glyphicon glyphicon-plus"></i> Add Reaction</a </li>
> <li role="separator" class="divider"></li>
</li>
<li role="separator" class="divider"></li>
{% endif %} {% endif %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#generic_copy_object_modal"> <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
<i class="glyphicon glyphicon-duplicate"></i> Copy</a <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
> </li>
</li> <li>
<li> <a class="button" data-toggle="modal" data-target="#download_pathway_csv_modal">
<a <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a>
class="button" </li>
data-toggle="modal" <li>
data-target="#download_pathway_csv_modal" <a class="button" data-toggle="modal" data-target="#download_pathway_image_modal">
> <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a>
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a </li>
>
</li>
<li>
<a
class="button"
data-toggle="modal"
data-target="#download_pathway_image_modal"
>
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a
>
</li>
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a <a class="button" data-toggle="modal" data-target="#identify_missing_rules_modal">
class="button" <i class="glyphicon glyphicon-question-sign"></i> Identify Missing Rules</a>
data-toggle="modal" </li>
data-target="#identify_missing_rules_modal" <li role="separator" class="divider"></li>
> <li>
<i class="glyphicon glyphicon-question-sign"></i> Identify Missing <a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
Rules</a <i class="glyphicon glyphicon-edit"></i> Edit Pathway</a>
> </li>
</li> <li>
<li role="separator" class="divider"></li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<a class="button" data-toggle="modal" data-target="#edit_pathway_modal"> </li>
<i class="glyphicon glyphicon-edit"></i> Edit Pathway</a <li>
> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
<li> </li>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> {# <li>#}
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a {# <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
> {# <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#}
</li> {# </li>#}
<li> <li role="separator" class="divider"></li>
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <li>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a <a class="button" data-toggle="modal" data-target="#delete_pathway_node_modal">
> <i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
</li> </li>
{# <li>#} <li>
{# <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#} <a class="button" data-toggle="modal" data-target="#delete_pathway_edge_modal">
{# <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#} <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
{# </li>#} </li>
<li role="separator" class="divider"></li> <li>
<li> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<a <i class="glyphicon glyphicon-trash"></i> Delete Pathway</a>
class="button" </li>
data-toggle="modal"
data-target="#delete_pathway_node_modal"
>
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a
>
</li>
<li>
<a
class="button"
data-toggle="modal"
data-target="#delete_pathway_edge_modal"
>
<i class="glyphicon glyphicon-trash"></i> Delete Reaction</a
>
</li>
<li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Pathway</a
>
</li>
{% endif %} {% endif %}

58
templates/actions/objects/reaction.html
View File

@ -1,38 +1,28 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_reaction_modal"> <a role="button" data-toggle="modal" data-target="#edit_reaction_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Reaction</a <i class="glyphicon glyphicon-edit"></i> Edit Reaction</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a <li>
> <a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set External Reference</a>
<li> </li>
<a
role="button"
data-toggle="modal"
data-target="#generic_set_external_reference_modal"
>
<i class="glyphicon glyphicon-plus"></i> Set External Reference</a
>
</li>
{% endif %} {% endif %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#generic_copy_object_modal"> <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
<i class="glyphicon glyphicon-duplicate"></i> Copy</a <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
> </li>
</li>
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Reaction</a <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
> </li>
</li>
{% endif %} {% endif %}

45
templates/actions/objects/rule.html
View File

@ -1,29 +1,24 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_rule_modal"> <a role="button" data-toggle="modal" data-target="#edit_rule_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Rule</a <i class="glyphicon glyphicon-edit"></i> Edit Rule</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
>
</li>
{% endif %} {% endif %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#generic_copy_object_modal"> <a role="button" data-toggle="modal" data-target="#generic_copy_object_modal">
<i class="glyphicon glyphicon-duplicate"></i> Copy</a <i class="glyphicon glyphicon-duplicate"></i> Copy</a>
> </li>
</li>
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Rule</a <i class="glyphicon glyphicon-trash"></i> Delete Rule</a>
> </li>
</li>
{% endif %} {% endif %}

37
templates/actions/objects/scenario.html
View File

@ -1,25 +1,14 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a <a class="button" data-toggle="modal" data-target="#add_additional_information_modal">
class="button" <i class="glyphicon glyphicon-trash"></i> Add Additional Information</a>
data-toggle="modal" </li>
data-target="#add_additional_information_modal" <li>
> <a class="button" data-toggle="modal" data-target="#update_scenario_additional_information_modal">
<i class="glyphicon glyphicon-trash"></i> Add Additional Information</a <i class="glyphicon glyphicon-trash"></i> Set Additional Information</a>
> </li>
</li> <li>
<li> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<a <i class="glyphicon glyphicon-trash"></i> Delete Scenario</a>
class="button" </li>
data-toggle="modal" {% endif %}
data-target="#update_scenario_additional_information_modal"
>
<i class="glyphicon glyphicon-trash"></i> Set Additional Information</a
>
</li>
<li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Scenario</a
>
</li>
{% endif %}

50
templates/actions/objects/user.html
View File

@ -1,30 +1,22 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_user_modal"> <a role="button" data-toggle="modal" data-target="#edit_user_modal">
<i class="glyphicon glyphicon-edit"></i> Update</a <i class="glyphicon glyphicon-edit"></i> Update</a>
> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#edit_password_modal">
<a role="button" data-toggle="modal" data-target="#edit_password_modal"> <i class="glyphicon glyphicon-lock"></i> Update Password</a>
<i class="glyphicon glyphicon-lock"></i> Update Password</a </li>
> <li>
</li> <a role="button" data-toggle="modal" data-target="#new_prediction_setting_modal">
<li> <i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a>
<a </li>
role="button" {# <li>#}
data-toggle="modal" {# <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#}
data-target="#new_prediction_setting_modal" {# <i class="glyphicon glyphicon-console"></i> Manage API Token</a>#}
> {# </li>#}
<i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a <li>
> <a role="button" data-toggle="modal" data-target="#generic_delete_modal">
</li> <i class="glyphicon glyphicon-trash"></i> Delete Account</a>
{# <li>#} </li>
{# <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#} {% endif %}
{# <i class="glyphicon glyphicon-console"></i> Manage API Token</a>#}
{# </li>#}
<li>
<a role="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Account</a
>
</li>
{% endif %}

54
templates/admin.html
View File

@ -1,17 +1,12 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div id="searchContent">
<div id=searchContent>
<form id="admin-form" action="{{ SERVER_BASE }}/admin" method="post"> <form id="admin-form" action="{{ SERVER_BASE }}/admin" method="post">
<div class="form-group"> <div class="form-group">
<label for="textarea">Query</label> <label for="textarea">Query</label>
<textarea <textarea id="textarea" class="form-control" rows="10" placeholder="Paste query here" required>
id="textarea"
class="form-control"
rows="10"
placeholder="Paste query here"
required
>
PREFIX pps: <http://localhost:8080/vocabulary#> PREFIX pps: <http://localhost:8080/vocabulary#>
SELECT ?name (count(?objId) as ?xcnt) SELECT ?name (count(?objId) as ?xcnt)
WHERE { WHERE {
@ -20,29 +15,32 @@ WHERE {
?packageId pps:reviewStatus 'reviewed' . ?packageId pps:reviewStatus 'reviewed' .
?packageId pps:pathway ?objId . ?packageId pps:pathway ?objId .
} GROUP BY ?name } GROUP BY ?name
</textarea </textarea>
> </div>
</div> <button id="submit" type="button" class="btn btn-primary">Submit</button>
<button id="submit" type="button" class="btn btn-primary">Submit</button>
</form> </form>
<p></p> <p></p>
</div> </div>
<div id="results"></div> <div id="results">
<div id="loading"></div> </div>
<script> <div id="loading"></div>
$(function () { </div>
$("#submit").on("click", function () { <script>
$(function() {
$('#submit').on('click', function() {
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}"); makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
data = { data = {
query: $("#textarea").val(), "query": $("#textarea").val()
}; }
$.post("{{ SERVER_BASE }}/expire", data, function (result) { $.post("{{ SERVER_BASE }}/expire", data, function(result) {
$("#loading").empty(); $("#loading").empty();
queryResultToTable("results", result); queryResultToTable("results", result);
}); })
});
}); });
</script> })
</script>
{% endblock content %} {% endblock content %}

136
templates/collections/joblog.html
View File

@ -1,80 +1,70 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% load envipytags %}
{% block content %} {% block content %}
<div class="panel-group" id="reviewListAccordion">
<div class="panel panel-default">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
Jobs
</div>
<div class="panel-body">
<p>Job Logs Desc</p>
</div>
<div <div class="panel-group" id="reviewListAccordion">
class="panel panel-default panel-heading list-group-item" <div class="panel panel-default">
style="background-color:silver" <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
> Jobs
<h4 class="panel-title"> </div>
<a <div class="panel-body">
id="job-accordion-link" <p>
data-toggle="collapse" Job Logs Desc
data-parent="#job-accordion" </p>
href="#jobs"
> </div>
Jobs
</a> <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
</h4> <h4 class="panel-title">
</div> <a id="job-accordion-link" data-toggle="collapse" data-parent="#job-accordion" href="#jobs">
<div id="jobs" class="panel-collapse in collapse"> Jobs
<div class="panel-body list-group-item" id="job-content"> </a>
<table class="table-bordered table-hover table"> </h4>
<tr style="background-color: rgba(0, 0, 0, 0.08);"> </div>
<th scope="col">ID</th> <div id="jobs"
<th scope="col">Name</th> class="panel-collapse collapse in">
<th scope="col">Status</th> <div class="panel-body list-group-item" id="job-content">
<th scope="col">Queued</th> <table class="table table-bordered table-hover">
<th scope="col">Done</th> <tr style="background-color: rgba(0, 0, 0, 0.08);">
<th scope="col">Result</th> <th scope="col">ID</th>
</tr> <th scope="col">Name</th>
<tbody> <th scope="col">Status</th>
{% for job in jobs %} <th scope="col">Queued</th>
<tr> <th scope="col">Done</th>
<td>{{ job.task_id }}</td> <th scope="col">Result</th>
<td>{{ job.job_name }}</td> </tr>
<td>{{ job.status }}</td> <tbody>
<td>{{ job.created }}</td> {% for job in jobs %}
<td>{{ job.done_at }}</td> <tr>
{% if job.task_result and job.task_result|is_url == True %} <td>{{ job.task_id }}</td>
<td><a href="{{ job.task_result }}">Result</a></td> <td>{{ job.job_name }}</td>
{% elif job.task_result %} <td>{{ job.status }}</td>
<td>{{ job.task_result|slice:"40" }}...</td> <td>{{ job.created }}</td>
{% else %} <td>{{ job.done_at }}</td>
<td>Empty</td> {% if job.task_result and job.task_result|is_url == True %}
{% endif %} <td><a href="{{ job.task_result }}">Result</a></td>
</tr> {% elif job.task_result %}
{% endfor %} <td>{{ job.task_result|slice:"40" }}...</td>
</tbody> {% else %}
</table> <td>Empty</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Unreviewable objects such as User / Group / Setting -->
<ul class='list-group'>
{% for obj in objects %}
{% if object_type == 'user' %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
{% else %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
{% endif %}
{% endfor %}
</ul>
</div> </div>
</div>
<!-- Unreviewable objects such as User / Group / Setting -->
<ul class="list-group">
{% for obj in objects %}
{% if object_type == 'user' %}
<a class="list-group-item" href="{{ obj.url }}"
>{{ obj.username }}</a
>
{% else %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
{% endif %}
{% endfor %}
</ul>
</div> </div>
</div>
{% endblock content %} {% endblock content %}

659
templates/collections/objects_list.html
View File

@ -2,427 +2,269 @@
{% load static %} {% load static %}
{% block content %} {% block content %}
{% if object_type != 'package' %} {% if object_type != 'package' %}
<div> <div>
<div id="load-all-error" style="display: none;"> <div id="load-all-error" style="display: none;">
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger" role="alert">
<span <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
class="glyphicon glyphicon-exclamation-sign" <span class="sr-only">Error:</span>
aria-hidden="true" Getting objects failed!
></span> </div>
<span class="sr-only">Error:</span>
Getting objects failed!
</div>
</div>
<input
type="text"
id="object-search"
class="form-control"
placeholder="Search by name"
style="display: none;"
/>
<p></p>
</div>
{% endif %}
{% block action_modals %}
{% if object_type == 'package' %}
{% include "modals/collections/new_package_modal.html" %}
{% include "modals/collections/import_package_modal.html" %}
{% include "modals/collections/import_legacy_package_modal.html" %}
{% elif object_type == 'compound' %}
{% include "modals/collections/new_compound_modal.html" %}
{% elif object_type == 'rule' %}
{% include "modals/collections/new_rule_modal.html" %}
{% elif object_type == 'reaction' %}
{% include "modals/collections/new_reaction_modal.html" %}
{% elif object_type == 'pathway' %}
{# {% include "modals/collections/new_pathway_modal.html" %} #}
{% elif object_type == 'node' %}
{% include "modals/collections/new_node_modal.html" %}
{% elif object_type == 'edge' %}
{% include "modals/collections/new_edge_modal.html" %}
{% elif object_type == 'scenario' %}
{% include "modals/collections/new_scenario_modal.html" %}
{% elif object_type == 'model' %}
{% include "modals/collections/new_model_modal.html" %}
{% elif object_type == 'setting' %}
{#{% include "modals/collections/new_setting_modal.html" %}#}
{% elif object_type == 'user' %}
<div></div>
{% elif object_type == 'group' %}
{% include "modals/collections/new_group_modal.html" %}
{% endif %}
{% endblock action_modals %}
<div class="panel-group" id="reviewListAccordion">
<div class="panel panel-default">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{% if object_type == 'package' %}
Packages
{% elif object_type == 'compound' %}
Compounds
{% elif object_type == 'structure' %}
Compound structures
{% elif object_type == 'rule' %}
Rules
{% elif object_type == 'reaction' %}
Reactions
{% elif object_type == 'pathway' %}
Pathways
{% elif object_type == 'node' %}
Nodes
{% elif object_type == 'edge' %}
Edges
{% elif object_type == 'scenario' %}
Scenarios
{% elif object_type == 'model' %}
Model
{% elif object_type == 'setting' %}
Settings
{% elif object_type == 'user' %}
Users
{% elif object_type == 'group' %}
Groups
{% endif %}
<div
id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"
>
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% if object_type == 'package' %}
{% include "actions/collections/package.html" %}
{% elif object_type == 'compound' %}
{% include "actions/collections/compound.html" %}
{% elif object_type == 'structure' %}
{% include "actions/collections/compound_structure.html" %}
{% elif object_type == 'rule' %}
{% include "actions/collections/rule.html" %}
{% elif object_type == 'reaction' %}
{% include "actions/collections/reaction.html" %}
{% elif object_type == 'setting' %}
{% include "actions/collections/setting.html" %}
{% elif object_type == 'scenario' %}
{% include "actions/collections/scenario.html" %}
{% elif object_type == 'model' %}
{% include "actions/collections/model.html" %}
{% elif object_type == 'pathway' %}
{% include "actions/collections/pathway.html" %}
{% elif object_type == 'node' %}
{% include "actions/collections/node.html" %}
{% elif object_type == 'edge' %}
{% include "actions/collections/edge.html" %}
{% elif object_type == 'group' %}
{% include "actions/collections/group.html" %}
{% endif %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
<!-- Set Text above links -->
{% if object_type == 'package' %}
<p>
A package contains pathways, rules, etc. and can reflect specific
experimental conditions.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/packages"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'compound' %}
<p>
A compound stores the structure of a molecule and can include
meta-information.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/compounds"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'structure' %}
<p>
The structures stored in this compound
<a
target="_blank"
href="https://wiki.envipath.org/index.php/compounds"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'rule' %}
<p>
A rule describes a biotransformation reaction template that is
defined as SMIRKS.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/Rules"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'reaction' %}
<p>
A reaction is a specific biotransformation from educt compounds to
product compounds.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/reactions"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'pathway' %}
<p>
A pathway displays the (predicted) biodegradation of a compound as
graph.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/pathways"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'node' %}
<p>
Nodes represent the (predicted) compounds in a graph.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/nodes"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'edge' %}
<p>
Edges represent the links between Nodes in a graph
<a
target="_blank"
href="https://wiki.envipath.org/index.php/edges"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'scenario' %}
<p>
A scenario contains meta-information that can be attached to other
data (compounds, rules, ..).
<a
target="_blank"
href="https://wiki.envipath.org/index.php/scenarios"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'model' %}
<p>
A model applies machine learning to limit the combinatorial
explosion.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/relative_reasoning"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'setting' %}
<p>
A setting includes configuration parameters for pathway predictions.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/settings"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'user' %}
<p>
Register now to create own packages and to submit and manage your
data.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/users"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% elif object_type == 'group' %}
<p>
Users can team up in groups to share packages.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/groups"
role="button"
>Learn more &gt;&gt;</a
>
</p>
{% endif %}
<!-- If theres nothing to show extend the text above -->
{% if reviewed_objects and unreviewed_objects %}
{% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
<p>
Nothing found. There are two possible reasons: <br /><br />1.
There is no content yet.<br />2. You have no reading
permissions.<br /><br />Please be sure you have at least reading
permissions.
</p>
{% endif %}
{% endif %}
</div>
{% if reviewed_objects %}
{% if reviewed_objects|length > 0 %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="ReviewedLink"
data-toggle="collapse"
data-parent="#reviewListAccordion"
href="#Reviewed"
>Reviewed</a
>
</h4>
</div>
<div id="Reviewed" class="panel-collapse in collapse">
<div class="panel-body list-group-item" id="ReviewedContent">
{% if object_type == 'package' %}
{% for obj in reviewed_objects %}
<a class="list-group-item" href="{{ obj.url }}"
>{{ obj.name|safe }}
<span
class="glyphicon glyphicon-star"
aria-hidden="true"
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Reviewed"
>
</span>
</a>
{% endfor %}
{% else %}
{% for obj in reviewed_objects|slice:":50" %}
<a class="list-group-item" href="{{ obj.url }}"
>{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
<span
class="glyphicon glyphicon-star"
aria-hidden="true"
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Reviewed"
>
</span>
</a>
{% endfor %}
{% endif %}
</div> </div>
</div>
<input type="text" id="object-search" class="form-control" placeholder="Search by name"
style="display: none;">
<p></p>
</div>
{% endif %}
{% block action_modals %}
{% if object_type == 'package' %}
{% include "modals/collections/new_package_modal.html" %}
{% include "modals/collections/import_package_modal.html" %}
{% include "modals/collections/import_legacy_package_modal.html" %}
{% elif object_type == 'compound' %}
{% include "modals/collections/new_compound_modal.html" %}
{% elif object_type == 'rule' %}
{% include "modals/collections/new_rule_modal.html" %}
{% elif object_type == 'reaction' %}
{% include "modals/collections/new_reaction_modal.html" %}
{% elif object_type == 'pathway' %}
{# {% include "modals/collections/new_pathway_modal.html" %} #}
{% elif object_type == 'node' %}
{% include "modals/collections/new_node_modal.html" %}
{% elif object_type == 'edge' %}
{% include "modals/collections/new_edge_modal.html" %}
{% elif object_type == 'scenario' %}
{% include "modals/collections/new_scenario_modal.html" %}
{% elif object_type == 'model' %}
{% include "modals/collections/new_model_modal.html" %}
{% elif object_type == 'setting' %}
{#{% include "modals/collections/new_setting_modal.html" %}#}
{% elif object_type == 'user' %}
<div></div>
{% elif object_type == 'group' %}
{% include "modals/collections/new_group_modal.html" %}
{% endif %} {% endif %}
{% endif %} {% endblock action_modals %}
{% if unreviewed_objects %}
<div <div class="panel-group" id="reviewListAccordion">
class="panel panel-default panel-heading list-group-item" <div class="panel panel-default">
style="background-color:silver" <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
>
<h4 class="panel-title">
<a
id="UnreviewedLink"
data-toggle="collapse"
data-parent="#unReviewListAccordion"
href="#Unreviewed"
>Unreviewed</a
>
</h4>
</div>
<div
id="Unreviewed"
class="panel-collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %} collapse"
>
<div class="panel-body list-group-item" id="UnreviewedContent">
{% if object_type == 'package' %} {% if object_type == 'package' %}
{% for obj in unreviewed_objects %} Packages
<a class="list-group-item" href="{{ obj.url }}" {% elif object_type == 'compound' %}
>{{ obj.name|safe }}</a Compounds
> {% elif object_type == 'structure' %}
{% endfor %} Compound structures
{% else %} {% elif object_type == 'rule' %}
{% for obj in unreviewed_objects|slice:":50" %} Rules
<a class="list-group-item" href="{{ obj.url }}" {% elif object_type == 'reaction' %}
>{{ obj.name|safe }}</a Reactions
> {% elif object_type == 'pathway' %}
{% endfor %} Pathways
{% elif object_type == 'node' %}
Nodes
{% elif object_type == 'edge' %}
Edges
{% elif object_type == 'scenario' %}
Scenarios
{% elif object_type == 'model' %}
Model
{% elif object_type == 'setting' %}
Settings
{% elif object_type == 'user' %}
Users
{% elif object_type == 'group' %}
Groups
{% endif %} {% endif %}
</div> <div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% if object_type == 'package' %}
{% include "actions/collections/package.html" %}
{% elif object_type == 'compound' %}
{% include "actions/collections/compound.html" %}
{% elif object_type == 'structure' %}
{% include "actions/collections/compound_structure.html" %}
{% elif object_type == 'rule' %}
{% include "actions/collections/rule.html" %}
{% elif object_type == 'reaction' %}
{% include "actions/collections/reaction.html" %}
{% elif object_type == 'setting' %}
{% include "actions/collections/setting.html" %}
{% elif object_type == 'scenario' %}
{% include "actions/collections/scenario.html" %}
{% elif object_type == 'model' %}
{% include "actions/collections/model.html" %}
{% elif object_type == 'pathway' %}
{% include "actions/collections/pathway.html" %}
{% elif object_type == 'node' %}
{% include "actions/collections/node.html" %}
{% elif object_type == 'edge' %}
{% include "actions/collections/edge.html" %}
{% elif object_type == 'group' %}
{% include "actions/collections/group.html" %}
{% endif %}
{% endblock %}
</ul>
</div>
</div> </div>
{% endif %} <div class="panel-body">
{% if objects %} <!-- Set Text above links -->
<!-- Unreviewable objects such as User / Group / Setting --> {% if object_type == 'package' %}
<ul class="list-group"> <p>A package contains pathways, rules, etc. and can reflect specific experimental
{% for obj in objects %} conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
{% if object_type == 'user' %} more &gt;&gt;</a></p>
<a class="list-group-item" href="{{ obj.url }}" {% elif object_type == 'compound' %}
>{{ obj.username|safe }}</a <p>A compound stores the structure of a molecule and can include meta-information.
> <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
{% else %} &gt;&gt;</a></p>
<a class="list-group-item" href="{{ obj.url }}" {% elif object_type == 'structure' %}
>{{ obj.name|safe }}</a <p>The structures stored in this compound
> <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'rule' %}
<p>A rule describes a biotransformation reaction template that is defined as SMIRKS.
<a target="_blank" href="https://wiki.envipath.org/index.php/Rules" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'reaction' %}
<p>A reaction is a specific biotransformation from educt compounds to product compounds.
<a target="_blank" href="https://wiki.envipath.org/index.php/reactions" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'pathway' %}
<p>A pathway displays the (predicted) biodegradation of a compound as graph.
<a target="_blank" href="https://wiki.envipath.org/index.php/pathways" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'node' %}
<p>Nodes represent the (predicted) compounds in a graph.
<a target="_blank" href="https://wiki.envipath.org/index.php/nodes" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'edge' %}
<p>Edges represent the links between Nodes in a graph
<a target="_blank" href="https://wiki.envipath.org/index.php/edges" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'scenario' %}
<p>A scenario contains meta-information that can be attached to other data (compounds, rules, ..).
<a target="_blank" href="https://wiki.envipath.org/index.php/scenarios" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'model' %}
<p>A model applies machine learning to limit the combinatorial explosion.
<a target="_blank" href="https://wiki.envipath.org/index.php/relative_reasoning" role="button">Learn
more
&gt;&gt;</a></p>
{% elif object_type == 'setting' %}
<p>A setting includes configuration parameters for pathway predictions.
<a target="_blank" href="https://wiki.envipath.org/index.php/settings" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'user' %}
<p>Register now to create own packages and to submit and manage your data.
<a target="_blank" href="https://wiki.envipath.org/index.php/users" role="button">Learn more
&gt;&gt;</a></p>
{% elif object_type == 'group' %}
<p>Users can team up in groups to share packages.
<a target="_blank" href="https://wiki.envipath.org/index.php/groups" role="button">Learn more
&gt;&gt;</a></p>
{% endif %} {% endif %}
{% endfor %}
<!-- If theres nothing to show extend the text above -->
{% if reviewed_objects and unreviewed_objects %}
{% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
<p>Nothing found. There are two possible reasons: <br><br>1. There is no content yet.<br>2. You have no
reading permissions.<br><br>Please be sure you have at least reading permissions.</p>
{% endif %}
{% endif %}
</div>
{% if reviewed_objects %}
{% if reviewed_objects|length > 0 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="ReviewedLink" data-toggle="collapse" data-parent="#reviewListAccordion"
href="#Reviewed">Reviewed</a>
</h4>
</div>
<div id="Reviewed" class="panel-collapse collapse in">
<div class="panel-body list-group-item" id="ReviewedContent">
{% if object_type == 'package' %}
{% for obj in reviewed_objects %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}
<span class="glyphicon glyphicon-star" aria-hidden="true"
style="float:right" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Reviewed">
</span>
</a>
{% endfor %}
{% else %}
{% for obj in reviewed_objects|slice:":50" %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}{# <i>({{ obj.package.name }})</i> #}
<span class="glyphicon glyphicon-star" aria-hidden="true"
style="float:right" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Reviewed">
</span>
</a>
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
{% if unreviewed_objects %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver"><h4
class="panel-title"><a id="UnreviewedLink" data-toggle="collapse" data-parent="#unReviewListAccordion"
href="#Unreviewed">Unreviewed</a></h4></div>
<div id="Unreviewed" class="panel-collapse collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %}">
<div class="panel-body list-group-item" id="UnreviewedContent">
{% if object_type == 'package' %}
{% for obj in unreviewed_objects %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
{% endfor %}
{% else %}
{% for obj in unreviewed_objects|slice:":50" %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
{% if objects %}
<!-- Unreviewable objects such as User / Group / Setting -->
<ul class='list-group'>
{% for obj in objects %}
{% if object_type == 'user' %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username|safe }}</a>
{% else %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
{% endif %}
{% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
<style> <style>
.spinner-widget { .spinner-widget {
position: fixed; /* stays in place on scroll */ position: fixed; /* stays in place on scroll */
bottom: 20px; /* distance from bottom */ bottom: 20px; /* distance from bottom */
right: 20px; /* distance from right */ right: 20px; /* distance from right */
z-index: 9999; /* above most elements */ z-index: 9999; /* above most elements */
width: 60px; /* adjust to gif size */ width: 60px; /* adjust to gif size */
height: 60px; height: 60px;
} }
.spinner-widget img { .spinner-widget img {
width: 100%; width: 100%;
height: auto; height: auto;
} }
</style> </style>
<div id="load-all-loading" class="spinner-widget" style="display: none"> <div id="load-all-loading" class="spinner-widget" style="display: none">
<img <img id="loading-gif" src="{% static '/images/wait.gif' %}" alt="Loading...">
id="loading-gif"
src="{% static '/images/wait.gif' %}"
alt="Loading..."
/>
</div> </div>
</div>
{# prettier-ignore-start #} </div>
<script> <script>
$(function () { $(function () {
@ -458,7 +300,7 @@
}, 2500); }, 2500);
{% endif %} {% endif %}
{% endif %} {% endif %}
$('#modal-form-delete-submit').on('click', function (e) { $('#modal-form-delete-submit').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$('#modal-form-delete').submit(); $('#modal-form-delete').submit();
@ -474,5 +316,4 @@
}); });
</script> </script>
{# prettier-ignore-end #}
{% endblock content %} {% endblock content %}

118
templates/compare.html
View File

@ -1,75 +1,55 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% block content %} {% block content %}
<div>
<form action="" method="post">
{% csrf_token %}
<input
type="text"
class="form-control"
id="smiles"
name="smiles"
placeholder="SMILES"
value="{{ smiles }}"
/>
<input
type="text"
class="form-control"
id="smiles"
name="smirks"
placeholder="SMIRKS"
value="{{ smirks }}"
/>
<button type="submit" class="btn btn-primary">Test</button>
</form>
</div>
{% if result %}
{{ smiles }}
<p></p>
<img
width="400"
src="{% url 'depict' %}?smiles={{ smiles|urlencode }}"
/><br />
<p></p>
{% if rule %}
{{ smirks }}
<p></p>
{{ rule.reactants_smarts }}
<p></p>
{{ rule.products_smarts }}
<p></p>
<div>{{ rule.as_svg|safe }}</div>
{% endif %}
<h2>Diff</h2>
{% if diff %}
{% for d in diff %}
{{ d }}
{% endfor %}
{% else %}
{{ "No diff" }}
{% endif %}
<div> <div>
<div class="col-md-6"> <form action="" method="post">
<h2>Ambit</h2> {% csrf_token %}
{% for p in ambit_res %} <input type="text" class="form-control" id="smiles" name="smiles" placeholder="SMILES"
{{ p }}<br /> value="{{ smiles }}"/>
<img <input type="text" class="form-control" id="smiles" name="smirks" placeholder="SMIRKS"
width="400" value="{{ smirks }}"/>
src="{% url 'depict' %}?smiles={{ p|urlencode }}" <button type="submit" class="btn btn-primary">Test</button>
/><br /> </form>
{% endfor %}
</div>
<div class="col-md-6">
<h2>RDKit</h2>
{% for p in rdkit_res %}
{{ p }}<br />
<img
width="400"
src="{% url 'depict' %}?smiles={{ p|urlencode }}"
/><br />
{% endfor %}
</div>
</div> </div>
{% endif %} {% if result %}
{{ smiles }}<p></p>
<img width='400' src='{% url 'depict' %}?smiles={{ smiles|urlencode }}'><br>
<p></p>
{% if rule %}
{{ smirks }}
<p></p>
{{ rule.reactants_smarts }}
<p></p>
{{ rule.products_smarts }}
<p></p>
<div>
{{ rule.as_svg|safe }}
</div>
{% endif %}
<h2>Diff</h2>
{% if diff %}
{% for d in diff %}
{{ d }}
{% endfor %}
{% else %}
{{ "No diff" }}
{% endif %}
<div>
<div class="col-md-6">
<h2>Ambit</h2>
{% for p in ambit_res %}
{{ p }}<br>
<img width='400' src='{% url 'depict' %}?smiles={{ p|urlencode }}'><br>
{% endfor %}
</div>
<div class="col-md-6">
<h2>RDKit</h2>
{% for p in rdkit_res %}
{{ p }}<br>
<img width='400' src='{% url 'depict' %}?smiles={{ p|urlencode }}'><br>
{% endfor %}
</div>
</div>
{% endif %}
{% endblock content %} {% endblock content %}

19
templates/errors/400_bad_request.html
View File

@ -1,18 +1,15 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="alert alert-error" role="alert">
<div class="alert alert-error" role="alert">
<h4 class="alert-heading">Bad Request!</h4> <h4 class="alert-heading">Bad Request!</h4>
<p>Lorem</p> <p>Lorem</p>
<hr /> <hr>
<p class="mb-0"> <p class="mb-0">
You can find out more about permissions in our You can find out more about permissions in our <a target="_blank"
<a href="https://wiki.envipath.org/index.php/packages"
target="_blank" role="button">Wiki &gt;&gt;</a></p>
href="https://wiki.envipath.org/index.php/packages" </div>
role="button"
>Wiki &gt;&gt;</a
>
</p>
</div>
{% endblock content %} {% endblock content %}

21
templates/errors/403_access_denied.html
View File

@ -1,18 +1,15 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="alert alert-error" role="alert">
<div class="alert alert-error" role="alert">
<h4 class="alert-heading">Access Denied!</h4> <h4 class="alert-heading">Access Denied!</h4>
<p>Access to X denied.</p> <p>Access to X denied. </p>
<hr /> <hr>
<p class="mb-0"> <p class="mb-0">
You can find out more about permissions in our You can find out more about permissions in our <a target="_blank"
<a href="https://wiki.envipath.org/index.php/packages"
target="_blank" role="button">Wiki &gt;&gt;</a></p>
href="https://wiki.envipath.org/index.php/packages" </div>
role="button"
>Wiki &gt;&gt;</a
>
</p>
</div>
{% endblock content %} {% endblock content %}

19
templates/errors/404_not_found.html
View File

@ -1,18 +1,15 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="alert alert-error" role="alert">
<div class="alert alert-error" role="alert">
<h4 class="alert-heading">Not Found!</h4> <h4 class="alert-heading">Not Found!</h4>
<p>Does not exist</p> <p>Does not exist</p>
<hr /> <hr>
<p class="mb-0"> <p class="mb-0">
You can find out more about permissions in our You can find out more about permissions in our <a target="_blank"
<a href="https://wiki.envipath.org/index.php/packages"
target="_blank" role="button">Wiki &gt;&gt;</a></p>
href="https://wiki.envipath.org/index.php/packages" </div>
role="button"
>Wiki &gt;&gt;</a
>
</p>
</div>
{% endblock content %} {% endblock content %}

14
templates/errors/error.html
View File

@ -1,9 +1,13 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">{{ error_message }}</h4> <div class="alert alert-danger" role="alert">
<hr /> <h4 class="alert-heading">{{ error_message }}</h4>
<p class="mb-0">{{ error_detail }}</p> <hr>
</div> <p class="mb-0">
{{ error_detail }}
</p>
</div>
{% endblock content %} {% endblock content %}

15
templates/errors/user_account_inactive.html
View File

@ -1,11 +1,12 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Your account has not been activated yet!</h4> <div class="alert alert-danger" role="alert">
<p> <h4 class="alert-heading">Your account has not been activated yet!</h4>
Your account has not been activated yet. If you have questions <p>Your account has not been activated yet. If you have questions <a href="mailto:admin@envipath.org">contact
<a href="mailto:admin@envipath.org">contact us.</a> us.</a>
</p> </p>
</div> </div>
{% endblock content %} {% endblock content %}

9
templates/framework.html
View File

@ -124,7 +124,7 @@
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div <div
class="navbar-collapse collapse-framework navbar-collapse-framework collapse" class="collapse navbar-collapse collapse-framework navbar-collapse-framework"
id="navbarCollapse" id="navbarCollapse"
> >
<ul class="nav navbar-nav navbar-nav-framework"> <ul class="nav navbar-nav navbar-nav-framework">
@ -151,6 +151,11 @@
>Package</a >Package</a
> >
</li> </li>
<li>
<a href="{{ meta.server_url }}/search" id="searchLink"
>Search</a
>
</li>
<li> <li>
<a href="{{ meta.server_url }}/model" id="modelLink" <a href="{{ meta.server_url }}/model" id="modelLink"
>Modelling</a >Modelling</a
@ -333,7 +338,7 @@
> >
</div> </div>
</div> </div>
<div id="license" class="panel-collapse in collapse"> <div id="license" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
<a target="_blank" href="{{ meta.current_package.license.link }}"> <a target="_blank" href="{{ meta.current_package.license.link }}">
<img src="{{ meta.current_package.license.image_link }}" /> <img src="{{ meta.current_package.license.image_link }}" />

25
templates/framework_modern.html
View File

@ -80,7 +80,7 @@
{% block main_content %} {% block main_content %}
{# Breadcrumbs - outside main content, optional #} {# Breadcrumbs - outside main content, optional #}
{% if breadcrumbs %} {% if breadcrumbs %}
<div id="bread" class="mx-auto max-w-7xl px-4 py-4"> <div id="bread" class="max-w-7xl mx-auto px-4 py-4">
<div class="breadcrumbs text-sm"> <div class="breadcrumbs text-sm">
<ul> <ul>
{% for elem in breadcrumbs %} {% for elem in breadcrumbs %}
@ -113,7 +113,7 @@
{# License - inside paper if present #} {# License - inside paper if present #}
{% if meta.url_contains_package and meta.current_package.license %} {% if meta.url_contains_package and meta.current_package.license %}
<div class="collapse-arrow bg-base-200 collapse p-8"> <div class="collapse collapse-arrow bg-base-200 m-8">
<input type="checkbox" checked /> <input type="checkbox" checked />
<div class="collapse-title text-xl font-medium">License</div> <div class="collapse-title text-xl font-medium">License</div>
<div class="collapse-content"> <div class="collapse-content">
@ -137,7 +137,7 @@
{# Floating Help Tab #} {# Floating Help Tab #}
{% if not public_mode %} {% if not public_mode %}
<div class="fixed top-1/2 right-0 z-50 -translate-y-1/2"> <div class="fixed right-0 top-1/2 -translate-y-1/2 z-50">
<a <a
href="https://community.envipath.org/" href="https://community.envipath.org/"
target="_blank" target="_blank"
@ -178,23 +178,6 @@
} }
}); });
// Open search modal function
function openSearchModal() {
const searchModal = document.getElementById("search_modal");
if (searchModal) {
searchModal.showModal();
}
}
// Click handler for search badge
const searchTrigger = document.getElementById("search-trigger");
if (searchTrigger) {
searchTrigger.addEventListener("click", function (event) {
event.preventDefault();
openSearchModal();
});
}
// Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux) // Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
document.addEventListener("keydown", function (event) { document.addEventListener("keydown", function (event) {
// Check if user is typing in an input field // Check if user is typing in an input field
@ -215,7 +198,7 @@
if (isCorrectModifier && event.key === "k") { if (isCorrectModifier && event.key === "k") {
event.preventDefault(); event.preventDefault();
openSearchModal(); search_modal.showModal();
} }
}); });
</script> </script>

97
templates/includes/footer.html
View File

@ -1,22 +1,19 @@
{% load static %} {% load static %}
<div class="bg-base-300 text-base-content mx-auto mt-10 lg:max-w-5xl"> <div class="lg:max-w-5xl mt-10 mx-auto bg-base-300 text-base-content">
<footer class="footer sm:footer-horizontal p-10">
{% if not public_mode %} <footer class="footer sm:footer-horizontal p-10">
<nav> {% if not public_mode %}
<h6 class="footer-title">Services</h6> <nav>
<a class="link link-hover" href="/predict">Predict</a> <h6 class="footer-title">Services</h6>
<a class="link link-hover" href="/package">Packages</a> <a class="link link-hover" href="/">Predict</a>
{% if user.is_authenticated %} <a class="link link-hover" href="/search">Search</a>
<a class="link link-hover" href="/model">Your Collections</a> <a class="link link-hover" href="/package">Browse</a>
{% if user.is_authenticated %}
<a class="link link-hover" href="/model">Your Collections</a>
{% endif %}
<a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a>
</nav>
{% endif %} {% endif %}
<a
href="https://wiki.envipath.org/"
target="_blank"
class="link link-hover"
>Documentation</a
>
</nav>
{% endif %}
<nav> <nav>
<h6 class="footer-title">Company</h6> <h6 class="footer-title">Company</h6>
<a class="link link-hover" href="/about">About us</a> <a class="link link-hover" href="/about">About us</a>
@ -32,61 +29,39 @@
<a class="link link-hover" href="/cite">Cite enviPath</a> <a class="link link-hover" href="/cite">Cite enviPath</a>
</nav> </nav>
</footer> </footer>
<footer class="footer border-t-2 border-neutral-300 px-10 py-4"> <footer class="footer border-neutral-300 border-t-2 px-10 py-4">
<div class="flex w-full flex-row items-start justify-between"> <div class="flex flex-row justify-between w-full items-start">
<aside class="grid-flow-col items-center"> <aside class="grid-flow-col items-center">
<svg <svg class="fill-neutral-content flex-shrink-0 h-14 m-2" viewbox="0 0 65 65" >
class="fill-neutral-content m-2 h-14 flex-shrink-0" <use
viewbox="0 0 65 65" href="{% static "/images/logo-square.svg" %}#ep-logo-square"
> >
<use </use>
href="{% static "/images/logo-square.svg" %}#ep-logo-square" </svg>
></use>
</svg>
enviPath Ltd. enviPath Ltd.
<br /> <br />
Biodegredation prediction since 2015. Biodegredation prediction since 2015.
</aside> </p>
<aside class="text-base-200 mt-2 text-sm">
<span class="text-xs tracking-tight">Version</span>
<span class="text-base font-bold">{{ meta.version }}</span>
</aside> </aside>
<aside class="text-sm text-base-200 mt-2"><span class="text-xs tracking-tight">Version</span> <span class="text-base font-bold">{{ meta.version }}</span></aside>
</div> </div>
<nav class="md:place-self-center md:justify-self-end"> <nav class="md:place-self-center md:justify-self-end">
<div class="grid grid-flow-col gap-4"> <div class="grid grid-flow-col gap-4">
<a href="https://www.youtube.com/@envipath7231" target="_blank"> <a href="https://www.youtube.com/@envipath7231" target="_blank">
<svg <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
role="img" <title>YouTube</title>
viewBox="0 0 24 24" <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
xmlns="http://www.w3.org/2000/svg" </svg>
class="h-6 w-6 fill-current"
>
<title>YouTube</title>
<path
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/>
</svg>
</a> </a>
<a href="https://community.envipath.org/" target="_blank"> <a href="https://community.envipath.org/" target="_blank">
<svg <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current">
role="img" <title>Discourse</title>
viewBox="0 0 24 24" <path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"/>
xmlns="http://www.w3.org/2000/svg" </svg>
class="h-6 w-6 fill-current"
>
<title>Discourse</title>
<path
d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"
/>
</svg>
</a> </a>
<a href="https://www.linkedin.com/company/envipath/" target="_blank"> <a href="https://www.linkedin.com/company/envipath/" target="_blank">
<img <img src="{% static "/images/linkedin.png" %}" alt="LinkedIn" class="w-6 h-6">
src="{% static "/images/linkedin.png" %}"
alt="LinkedIn"
class="h-6 w-6"
/>
</a> </a>
</div> </div>
</nav> </nav>

15
templates/includes/navbar.html
View File

@ -1,9 +1,9 @@
{% load static %} {% load static %}
{# Modern DaisyUI Navbar #} {# Modern DaisyUI Navbar #}
<div class="navbar x-50 bg-neutral-50 text-neutral-950 shadow-lg"> <div class="navbar bg-neutral-50 text-neutral-950 shadow-lg x-50">
<div class="navbar-start"> <div class="navbar-start">
<a href="{{ meta.server_url }}" class="btn btn-ghost text-xl normal-case"> <a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
<svg class="fill-base-content h-8" viewBox="0 0 104 26" role="img"> <svg class="h-8 fill-base-content" viewBox="0 0 104 26" role="img">
<use href="{% static "/images/logo-name.svg" %}#ep-logo-name" /> <use href="{% static "/images/logo-name.svg" %}#ep-logo-name" />
</svg> </svg>
</a> </a>
@ -26,9 +26,6 @@
tabindex="-1" tabindex="-1"
class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
> >
<li>
<a href="{{ meta.server_url }}/package" id="packageLink">Package</a>
</li>
<li> <li>
<a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a> <a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a>
</li> </li>
@ -60,9 +57,9 @@
<div class="navbar-end"> <div class="navbar-end">
{% if not public_mode %} {% if not public_mode %}
<a id="search-trigger" role="button" class="cursor-pointer"> <a href="/search" role="button">
<div <div
class="badge badge-dash bg-base-200 text-base-content/50 m-1 flex items-center space-x-1 p-2" class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -90,7 +87,7 @@
<div <div
tabindex="0" tabindex="0"
role="button" role="button"
class="btn btn-ghost btn-circle m-1" class="btn btn-ghost m-1 btn-circle"
id="loggedInButton" id="loggedInButton"
> >
<svg <svg

214
templates/index/index.html
View File

@ -2,86 +2,74 @@
{% load static %} {% load static %}
{% block main_content %} {% block main_content %}
<!-- Hero Section with Logo and Search --> <!-- Hero Section with Logo and Search -->
<section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none"> <section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
<div <div
class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br" class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;" style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
> >
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<!-- Predict Pathway text over the image --> <!-- Predict Pathway text over the image -->
<div class="absolute bottom-40 left-1/8 z-10 -translate-x-8"> <div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
<h2 class="text-base-100 text-left text-3xl text-shadow-lg"> <h2 class="text-3xl text-base-100 text-shadow-lg text-left">
Predict Your Pathway Predict Your Pathway
</h2> </h2>
</div> </div>
</div> </div>
</section> </section>
<div class="bg-base-200 mx-auto max-w-5xl shadow-md"> <div class="shadow-md max-w-5xl mx-auto bg-base-200">
<!-- Predict Pathway Section --> <!-- Predict Pathway Section -->
<div <div
class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse" class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 "
> >
<div <div
class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out" class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out"
> >
<div class="card-body"> <div class="card-body">
<div class="my-4 ml-8 flex h-fit flex-row items-center justify-start"> <!-- Input Mode Toggle - Fixed position outside fieldset -->
<div class="flex items-center gap-1"> <div class="flex flex-row justify-start items-center h-fit ml-8 my-4">
<label class="swap btn btn-ghost btn-sm p-1" title="Input Mode"> <div class="flex items-center gap-2">
<!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
<label class="toggle text-base-content toggle-md">
<input type="checkbox" /> <input type="checkbox" />
<span class="swap-on flex items-center gap-1"> <svg
<div aria-label="smiles mode"
class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
class="size-5"
>
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
fill="currentColor"
stroke="none"
> >
<svg <path
aria-label="smiles mode" fill-rule="evenodd"
xmlns="http://www.w3.org/2000/svg" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z"
viewBox="0 0 20 20" clip-rule="evenodd"
class="size-5" />
> </g>
<g </svg>
stroke-linejoin="round" <svg
stroke-linecap="round" aria-label="draw mode"
stroke-width="2" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20"
stroke="none" fill="currentColor"
> stroke="none"
<path class="size-5"
fill-rule="evenodd" >
d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" <path
clip-rule="evenodd" d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/> />
</g> </svg>
</svg>
</div>
<span class="ext-xs">SMILES</span>
</span>
<span class="swap-off flex items-center gap-1">
<div
class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
>
<svg
aria-label="draw mode"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
stroke="none"
class="size-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
</div>
<span class="text-base/50 text-xs">Draw</span>
</span>
</label> </label>
</div> </div>
</div> </div>
<fieldset <fieldset
class="fieldset overflow-hidden transition-all duration-300 ease-in-out" class="fieldset transition-all duration-300 ease-in-out overflow-hidden"
> >
<form <form
id="index-form" id="index-form"
@ -91,44 +79,42 @@
{% csrf_token %} {% csrf_token %}
<div <div
id="text-input-container" id="text-input-container"
class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100"
> >
<div class="join mx-auto w-full"> <div class="join w-full mx-auto">
<input <input
type="text" type="text"
id="index-form-text-input" id="index-form-text-input"
placeholder="canonical SMILES string" placeholder="canonical SMILES string"
class="input input-md join-item grow" class="input grow input-md join-item"
/> />
<button class="btn btn-neutral join-item">Predict!</button> <button class="btn btn-neutral join-item">Predict!</button>
</div> </div>
<div class="label relative mt-1 w-full"> <div class="label relative w-full mt-1">
<div class="flex gap-2"> <div class="flex gap-2">
<a <a
href="#" href="#"
class="example-link hover:text-primary cursor-pointer" class="example-link cursor-pointer hover:text-primary"
data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C" data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
title="load example" title="load example"
>Caffeine</a >Caffeine</a
> >
<a <a
href="#" href="#"
class="example-link hover:text-primary cursor-pointer" class="example-link cursor-pointer hover:text-primary"
data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O" data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
title="load example" title="load example"
>Ibuprofen</a >Ibuprofen</a
> >
</div> </div>
<a <a class="absolute top-0 left-[calc(100%-5.4rem)]" href="#"
class="absolute top-0 left-[calc(100%-5.4rem)]"
href="/predict"
>Advanced</a >Advanced</a
> >
</div> </div>
</div> </div>
<div <div
id="ketcher-container" id="ketcher-container"
class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95"
> >
<iframe <iframe
id="index-ketcher" id="index-ketcher"
@ -138,13 +124,11 @@
class="rounded-lg" class="rounded-lg"
></iframe> ></iframe>
<button <button
class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full" class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2"
> >
Predict! Predict!
</button> </button>
<div class="mt-1 flex w-full justify-end"> <a class="label mx-auto w-full mt-1" href="#">Advanced</a>
<a class="label justify-end" href="/predict">Advanced</a>
</div>
</div> </div>
<input <input
type="hidden" type="hidden"
@ -166,18 +150,18 @@
</div> </div>
<!-- Community News Section --> <!-- Community News Section -->
<section class="bg-base-200 z-10 mx-8 py-16"> <section class="py-16 bg-base-200 z-10 mx-8">
<div class="mx-auto max-w-7xl px-4"> <div class="max-w-7xl mx-auto px-4">
<h2 class="h2 mb-8 text-left font-bold">Community Updates</h2> <h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
<div id="community-news-container" class="flex justify-center gap-4"> <div id="community-news-container" class="flex gap-4 justify-center">
<!-- News cards will be populated here --> <!-- News cards will be populated here -->
<div id="loading" class="flex w-full justify-center"> <div id="loading" class="flex justify-center w-full">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
</div> </div>
<div class="mt-6 text-right"> <div class="text-right mt-6">
<a <a
href="https://community.envipath.org/c/announcements/10" href="https://community.envipath.org/c/announcements/10"
target="_blank" target="_blank"
@ -193,18 +177,18 @@
</section> </section>
<!-- Mission Statement Section --> <!-- Mission Statement Section -->
<section class="from-base-200 to-base-100 bg-gradient-to-b py-16"> <section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
<div class="mx-auto px-8 md:px-12"> <div class="mx-auto px-8 md:px-12">
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
<div class="w-1/3"> <div class="w-1/3">
<img <img
src="{% static "/images/ep-rule-artwork.png" %}" src="{% static "/images/ep-rule-artwork.png" %}"
alt="rule-based iterative tree greneration" alt="rule-based iterative tree greneration"
class="h-full w-full object-contain" class="w-full h-full object-contain"
/> />
</div> </div>
<div class="mr-8 w-2/3 space-y-4 text-left"> <div class="space-y-4 text-left w-2/3 mr-8">
<h2 class="h2 mb-8 font-bold">About enviPath</h2> <h2 class="h2 font-bold mb-8">About enviPath</h2>
<p class=""> <p class="">
enviPath is a database and prediction system for the microbial enviPath is a database and prediction system for the microbial
biotransformation of organic environmental contaminants. The biotransformation of organic environmental contaminants. The
@ -217,7 +201,7 @@
products. Explore our tools and contribute to advancing products. Explore our tools and contribute to advancing
environmental biotransformation research. environmental biotransformation research.
</p> </p>
<div class="float-right flex flex-row gap-4"> <div class="flex flex-row gap-4 float-right">
<a href="/about" class="btn btn-ghost-neutral">Read More</a> <a href="/about" class="btn btn-ghost-neutral">Read More</a>
<a href="/about" class="btn btn-neutral">Publications</a> <a href="/about" class="btn btn-neutral">Publications</a>
</div> </div>
@ -227,7 +211,7 @@
</section> </section>
<!-- Partners Section --> <!-- Partners Section -->
<section class="bg-base-100 py-14 sm:py-12"> <section class="py-14 sm:py-12 bg-base-100">
<div class="mx-auto px-6 lg:px-8"> <div class="mx-auto px-6 lg:px-8">
<div class="divider"> <div class="divider">
<h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2> <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
@ -238,12 +222,12 @@
<img <img
src="{% static "/images/uoa-logo-small.png" %}" src="{% static "/images/uoa-logo-small.png" %}"
alt="The University of Auckland" alt="The University of Auckland"
class="max-h-20 w-full object-contain lg:col-span-1" class=" max-h-20 w-full object-contain lg:col-span-1"
/> />
<img <img
src="{% static "/images/logo-eawag.svg" %}" src="{% static "/images/logo-eawag.svg" %}"
alt="Eawag" alt="Eawag"
class="max-h-12 w-full object-contain lg:col-span-1" class=" max-h-12 w-full object-contain lg:col-span-1"
/> />
<img <img
src="{% static "/images/uzh-logo.svg" %}" src="{% static "/images/uzh-logo.svg" %}"
@ -258,31 +242,6 @@
<script language="javascript"> <script language="javascript">
var currentPackage = "{{ meta.current_package.url }}"; var currentPackage = "{{ meta.current_package.url }}";
// Helper function to safely get Ketcher instance from iframe
function getKetcherInstance(iframeId) {
const ketcherFrame = document.getElementById(iframeId);
if (!ketcherFrame) {
console.error("Ketcher iframe not found:", iframeId);
return null;
}
try {
if (
"contentWindow" in ketcherFrame &&
ketcherFrame.contentWindow.ketcher
) {
return ketcherFrame.contentWindow.ketcher;
}
} catch (err) {
console.error(
"Cannot access Ketcher iframe - possible CORS issue:",
err,
);
}
return null;
}
// Discourse API integration is now handled by discourse-api.js // Discourse API integration is now handled by discourse-api.js
// Function to render Discourse topics into cards // Function to render Discourse topics into cards
@ -386,16 +345,10 @@
}, 300); }, 300);
// Transfer SMILES from Ketcher to text input if available // Transfer SMILES from Ketcher to text input if available
const ketcher = getKetcherInstance("index-ketcher"); if (window.indexKetcher && window.indexKetcher.getSmiles) {
if (ketcher && ketcher.getSmiles) { const smiles = window.indexKetcher.getSmiles();
try { if (smiles && smiles.trim() !== "") {
const smiles = ketcher.getSmiles(); $("#index-form-text-input").val(smiles);
if (smiles && smiles.trim() !== "") {
$("#index-form-text-input").val(smiles);
}
} catch (err) {
console.error("Failed to sync Ketcher to text input:", err);
// Non-critical error, just log it
} }
} }
} }
@ -464,32 +417,13 @@
var textSmiles = ""; var textSmiles = "";
// Check if we're in Ketcher mode and extract SMILES // Check if we're in Ketcher mode and extract SMILES
if ($('input[type="checkbox"]').is(":checked")) { if ($('input[type="checkbox"]').is(":checked") && window.indexKetcher) {
// Use the robust getter function textSmiles = window.indexKetcher.getSmiles().trim();
const ketcher = getKetcherInstance("index-ketcher");
if (ketcher && ketcher.getSmiles) {
try {
textSmiles = ketcher.getSmiles().trim();
} catch (err) {
console.error("Failed to get SMILES from Ketcher:", err);
alert(
"Unable to extract structure from the drawing editor. Please try again or switch to SMILES input mode.",
);
return;
}
} else {
console.warn("Ketcher not available, possibly still loading");
alert(
"The drawing editor is still loading. Please wait a moment and try again.",
);
return;
}
} else { } else {
textSmiles = $("#index-form-text-input").val().trim(); textSmiles = $("#index-form-text-input").val().trim();
} }
if (textSmiles === "") { if (textSmiles === "") {
alert("Please enter a SMILES string or draw a structure.");
return; return;
} }

91
templates/migration.html
View File

@ -1,71 +1,44 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% block content %} {% block content %}
<div class="panel-group" id="migration-detail"> <div class="panel-group" id="migration-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" Migration Status BT Rules
id="headingPanel" </div>
style="font-size:2rem;height: 46px" <div class="panel-body">
> <p>Rules with Error: {{ error }}/{{ total }} </p>
Migration Status BT Rules <p>Rules without Error: {{ success }}/{{ total }}</p>
</div> </div>
<div class="panel-body">
<p>Rules with Error: {{ error }}/{{ total }}</p>
<p>Rules without Error: {{ success }}/{{ total }}</p>
</div>
{% for obj in results %} {% for obj in results %}
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" {% if obj.status %}
style="background-color:silver" <span class="glyphicon glyphicon-ok" aria-hidden="true"
> style="float:right" data-toggle="tooltip"
{% if obj.status %} data-placement="top" title="" data-original-title="Reviewed">
<span
class="glyphicon glyphicon-ok"
aria-hidden="true"
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Reviewed"
>
</span> </span>
{% else %} {% else %}
<span <span class="glyphicon glyphicon-remove" aria-hidden="true"
class="glyphicon glyphicon-remove" style="float:right" data-toggle="tooltip"
aria-hidden="true" data-placement="top" title="" data-original-title="Reviewed">
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Reviewed"
>
</span> </span>
{% endif %} {% endif %}
<h4 class="panel-title"> <h4 class="panel-title">
<a <a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
id="{{ obj.id }}-link" href="#{{ obj.id }}">{{ obj.name|safe }}</a>
data-toggle="collapse" </h4>
data-parent="#migration-detail"
href="#{{ obj.id }}"
>{{ obj.name|safe }}</a
>
</h4>
</div> </div>
<div <div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
id="{{ obj.id }}" <div class="panel-body list-group-item">
class="panel-collapse {% if not obj.status %}in{% endif %} collapse" <a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name|safe }} Migration Detail Page</a>
> </div>
<div class="panel-body list-group-item">
<a class="list-group-item" href="{{ obj.detail_url }}"
>{{ obj.name|safe }} Migration Detail Page</a
>
</div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<script></script> <script>
</script>
{% endblock content %} {% endblock content %}

106
templates/migration_detail.html
View File

@ -1,77 +1,45 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% block content %} {% block content %}
<div class="panel-group" id="migration-detail"> <div class="panel-group" id="migration-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" Migration Status for {{ bt_rule_name }}
id="headingPanel" </div>
style="font-size:2rem;height: 46px" <div class="panel-body">
> <p>A package contains pathways, rules, etc. and can reflect specific experimental
Migration Status for {{ bt_rule_name }} conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
</div> more &gt;&gt;</a></p>
<div class="panel-body"> </div>
<p>
A package contains pathways, rules, etc. and can reflect specific
experimental conditions.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/packages"
role="button"
>Learn more &gt;&gt;</a
>
</p>
</div>
{% for obj in results %} {% for obj in results %}
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" {% if obj.status %}
style="background-color:silver" <span class="glyphicon glyphicon-ok" aria-hidden="true"
> style="float:right" data-toggle="tooltip"
{% if obj.status %} data-placement="top" title="" data-original-title="Reviewed">
<span </span>
class="glyphicon glyphicon-ok" {% else %}
aria-hidden="true" <span class="glyphicon glyphicon-remove" aria-hidden="true"
style="float:right" style="float:right" data-toggle="tooltip"
data-toggle="tooltip" data-placement="top" title="" data-original-title="Reviewed">
data-placement="top" </span>
title="" {% endif %}
data-original-title="Reviewed" <h4 class="panel-title">
> <a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
</span> href="#{{ obj.id }}">{{ obj.name|safe }}</a>
{% else %} </h4>
<span </div>
class="glyphicon glyphicon-remove" <div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
aria-hidden="true" <div class="panel-body list-group-item">
style="float:right" <pre>{{ obj.detail }}</pre>
data-toggle="tooltip" </div>
data-placement="top" </div>
title="" {% endfor %}
data-original-title="Reviewed"
>
</span>
{% endif %}
<h4 class="panel-title">
<a
id="{{ obj.id }}-link"
data-toggle="collapse"
data-parent="#migration-detail"
href="#{{ obj.id }}"
>{{ obj.name|safe }}</a
>
</h4>
</div> </div>
<div
id="{{ obj.id }}"
class="panel-collapse {% if not obj.status %}in{% endif %} collapse"
>
<div class="panel-body list-group-item">
<pre>{{ obj.detail }}</pre>
</div>
</div>
{% endfor %}
</div> </div>
</div>
<script></script> <script>
</script>
{% endblock content %} {% endblock content %}

75
templates/modals/cite_modal.html
View File

@ -1,48 +1,31 @@
<div <div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
class="modal fade bs-modal-lg" aria-hidden="true">
id="citemodal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
role="dialog" <div class="modal-header">
aria-labelledby="myLargeModalLabel" <h3>How to cite enviPath</h3>
aria-hidden="true" </div>
> <div class="modal-body">
<div class="modal-dialog modal-lg"> <ol class="list-group list-group-numbered">
<div class="modal-content"> <li class="list-group-item">
<div class="modal-header"> Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
<h3>How to cite enviPath</h3> <cite>Advancements in biotransformation pathway prediction: enhancements, datasets, and novel
</div> functionalities in enviPath.</cite>
<div class="modal-body"> <a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank">J Cheminform 16, 93
<ol class="list-group list-group-numbered"> (2024)</a>
<li class="list-group-item"> </li>
Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em> <li class="list-group-item">
<cite Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., Kramer, S., Fenner, K.
>Advancements in biotransformation pathway prediction: <cite>enviPath - The environmental contaminant biotransformation pathway resource</cite>
enhancements, datasets, and novel functionalities in <a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
enviPath.</cite Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages D502-D508
> </a>
<a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank" </li>
>J Cheminform 16, 93 (2024)</a </ol>
> </div>
</li> <div class="modal-footer">
<li class="list-group-item"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., </div>
Kramer, S., Fenner, K. </div>
<cite
>enviPath - The environmental contaminant biotransformation
pathway resource</cite
>
<a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages
D502-D508
</a>
</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div> </div>
</div>
</div> </div>

102
templates/modals/collections/import_legacy_package_modal.html
View File

@ -1,70 +1,42 @@
<div <div class="modal fade" tabindex="-1" id="import_legacy_package_modal" role="dialog"
class="modal fade" aria-labelledby="import_legacy_package_modal" aria-hidden="true">
tabindex="-1" <div class="modal-dialog">
id="import_legacy_package_modal" <div class="modal-content">
role="dialog" <div class="modal-header">
aria-labelledby="import_legacy_package_modal" <button type="button" class="close" data-dismiss="modal">
aria-hidden="true" <span aria-hidden="true">&times;</span>
> <span class="sr-only">Close</span>
<div class="modal-dialog"> </button>
<div class="modal-content"> <h4 class="modal-title">Import Package from legacy System</h4>
<div class="modal-header"> </div>
<button type="button" class="close" data-dismiss="modal"> <div class="modal-body">
<span aria-hidden="true">&times;</span> <p>Create a Package based on the JSON Export of the legacy system.</p>
<span class="sr-only">Close</span> <form id="import-legacy-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post"
</button> enctype="multipart/form-data">
<h4 class="modal-title">Import Package from legacy System</h4> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label class="btn btn-primary" for="legacyJsonFile">
<p>Create a Package based on the JSON Export of the legacy system.</p> <input id="legacyJsonFile" name="file" type="file" style="display:none;"
<form onchange="$('#upload-legacy-file-info').html(this.files[0].name)">
id="import-legacy-package-modal-form" Choose JSON File
accept-charset="UTF-8" </label>
data-remote="true" <span class="label label-info" id="upload-legacy-file-info"></span>
method="post" <input type="hidden" value="import-legacy-package-json" name="hidden" readonly="">
enctype="multipart/form-data" </p>
> </form>
{% csrf_token %} </div>
<p> <div class="modal-footer">
<label class="btn btn-primary" for="legacyJsonFile"> <a id="import-legacy-package-modal-form-submit" class="btn btn-primary" href="#">Submit</a>
<input <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
id="legacyJsonFile" </div>
name="file" </div>
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> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#import-legacy-package-modal-form-submit").on("click", function (e) { $('#import-legacy-package-modal-form-submit').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$("#import-legacy-package-modal-form").submit(); $('#import-legacy-package-modal-form').submit();
});
}); });
});
</script> </script>

102
templates/modals/collections/import_package_modal.html
View File

@ -1,70 +1,42 @@
<div <div class="modal fade" tabindex="-1" id="import_package_modal" role="dialog"
class="modal fade" aria-labelledby="import_package_modal" aria-hidden="true">
tabindex="-1" <div class="modal-dialog">
id="import_package_modal" <div class="modal-content">
role="dialog" <div class="modal-header">
aria-labelledby="import_package_modal" <button type="button" class="close" data-dismiss="modal">
aria-hidden="true" <span aria-hidden="true">&times;</span>
> <span class="sr-only">Close</span>
<div class="modal-dialog"> </button>
<div class="modal-content"> <h4 class="modal-title">Import Package</h4>
<div class="modal-header"> </div>
<button type="button" class="close" data-dismiss="modal"> <div class="modal-body">
<span aria-hidden="true">&times;</span> <p>Create a Package based on a JSON Export.</p>
<span class="sr-only">Close</span> <form id="import-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post"
</button> enctype="multipart/form-data">
<h4 class="modal-title">Import Package</h4> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label class="btn btn-primary" for="jsonFile">
<p>Create a Package based on a JSON Export.</p> <input id="jsonFile" name="file" type="file" style="display:none;"
<form onchange="$('#upload-file-info').html(this.files[0].name)">
id="import-package-modal-form" Choose JSON File
accept-charset="UTF-8" </label>
data-remote="true" <span class="label label-info" id="upload-file-info"></span>
method="post" <input type="hidden" value="import-package-json" name="hidden" readonly="">
enctype="multipart/form-data" </p>
> </form>
{% csrf_token %} </div>
<p> <div class="modal-footer">
<label class="btn btn-primary" for="jsonFile"> <a id="import-package-modal-form-submit" class="btn btn-primary" href="#">Submit</a>
<input <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
id="jsonFile" </div>
name="file" </div>
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> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#import-package-modal-form-submit").on("click", function (e) { $('#import-package-modal-form-submit').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$("#import-package-modal-form").submit(); $('#import-package-modal-form').submit();
});
}); });
});
</script> </script>

177
templates/modals/collections/new_compound_modal.html
View File

@ -1,119 +1,78 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="new_compound_modal" tabindex="-1" aria-labelledby="new_compound_modal" aria-modal="true"
class="modal fade bs-modal-lg" role="dialog">
id="new_compound_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="new_compound_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">×</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Create a new Compound</h4>
<div class="modal-content"> </div>
<div class="modal-header"> <div class="modal-body">
<button <form id="new_compound_modal_form" accept-charset="UTF-8" action="{% url 'package compound list' meta.current_package.uuid %}" data-remote="true" method="post">
type="button" {% csrf_token %}
class="close" <label for="compound-name">Name</label>
data-dismiss="modal" <input id="compound-name" class="form-control" name="compound-name" placeholder="Name"/>
aria-label="Close" <label for="compound-description">Description</label>
> <input id="compound-description" class="form-control" name="compound-description" placeholder="Description"/>
<span aria-hidden="true">×</span> <label for="compound-smiles">SMILES</label>
</button> <input type="text" class="form-control" name="compound-smiles" placeholder="SMILES" id="compound-smiles">
<h4 class="modal-title">Create a new Compound</h4> <p></p>
</div> <div>
<div class="modal-body"> <iframe id="new_compound_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
<form height="510"></iframe>
id="new_compound_modal_form" </div>
accept-charset="UTF-8" <p></p>
action="{% url 'package compound list' meta.current_package.uuid %}" </form>
data-remote="true" </div>
method="post" <div class="modal-footer">
> <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
{% csrf_token %} </button>
<label for="compound-name">Name</label> <button type="button" class="btn btn-primary" id="new_compound_modal_form_submit">Submit</button>
<input </div>
id="compound-name" </div>
class="form-control"
name="compound-name"
placeholder="Name"
/>
<label for="compound-description">Description</label>
<input
id="compound-description"
class="form-control"
name="compound-description"
placeholder="Description"
/>
<label for="compound-smiles">SMILES</label>
<input
type="text"
class="form-control"
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>
</div>
</div> </div>
<script> <script>
function newCompoundModalketcherToNewCompoundModalTextInput() {
$("#compound-smiles").val(this.ketcher.getSmiles());
}
$(function () { function newCompoundModalketcherToNewCompoundModalTextInput() {
$("#new_compound_ketcher").on("load", function () { $('#compound-smiles').val(this.ketcher.getSmiles());
const checkKetcherReady = () => { }
win = this.contentWindow;
if (win.ketcher && "editor" in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: newCompoundModalketcherToNewCompoundModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady(); $(function() {
$('#new_compound_ketcher').on('load', function() {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: newCompoundModalketcherToNewCompoundModalTextInput,
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();
});
}); });
$(function () { });
$("#new_compound_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#new_compound_modal_form").submit();
});
});
});
</script> </script>

105
templates/modals/collections/new_group_modal.html
View File

@ -1,70 +1,45 @@
<div <div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal"
class="modal fade" aria-hidden="true">
tabindex="-1" <div class="modal-dialog">
id="new_group_modal" <div class="modal-content">
role="dialog" <div class="modal-header">
aria-labelledby="new_group_modal" <button type="button" class="close" data-dismiss="modal">
aria-hidden="true" <span aria-hidden="true">&times;</span>
> <span class="sr-only">Close</span>
<div class="modal-dialog"> </button>
<div class="modal-content"> <h4 class="modal-title">New Group</h4>
<div class="modal-header"> </div>
<button type="button" class="close" data-dismiss="modal"> <div class="modal-body">
<span aria-hidden="true">&times;</span> <p>Create new Group. You can assign users to the group once
<span class="sr-only">Close</span> it is created. Description can be changed after creation.</p>
</button> <form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group"
<h4 class="modal-title">New Group</h4> data-remote="true"
</div> method="post">
<div class="modal-body"> {% csrf_token %}
<p> <p>
Create new Group. You can assign users to the group once it is <label for="name">Name</label>
created. Description can be changed after creation. <input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/>
</p> </p>
<form <p>
id="new_group_modal_form" <label for="description">Description</label>
accept-charset="UTF-8" <input id="description" type="text" class="form-control" placeholder="Description..."
action="{{ SERVER_BASE }}/group" name="group-description"/>
data-remote="true" </p>
method="post" </form>
> </div>
{% csrf_token %} <div class="modal-footer">
<p> <a id="new_group_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
<label for="name">Name</label> <button type="button" class="btn btn-default" data-dismiss="modal">
<input Cancel
id="name" </button>
type="text" </div>
name="group-name" </div>
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> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#new_group_modal_form_submit").on("click", function () { $('#new_group_modal_form_submit').on('click', function() {
$("#new_group_modal_form").submit(); $('#new_group_modal_form').submit();
}); });
}); });
</script> </script>

426
templates/modals/collections/new_model_modal.html
View File

@ -1,270 +1,188 @@
<div
class="modal fade"
tabindex="-1"
id="new_model_modal"
role="dialog"
aria-labelledby="new_model_modal"
aria-hidden="true"
>
<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">&times;</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">
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
available. For additional information have a look at our
<a
target="_blank"
href="https://wiki.envipath.org/index.php/relative-reasoning"
role="button"
>wiki &gt;&gt;</a
>
</div>
<!-- Name -->
<label for="model-name">Name</label>
<input
id="model-name"
name="model-name"
class="form-control"
placeholder="Name"
/>
<!-- Description --> <div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
<label for="model-description">Description</label> aria-hidden="true">
<input <div class="modal-dialog modal-lg">
id="model-description" <div class="modal-content">
name="model-description" <div class="modal-header">
class="form-control" <button type="button" class="close" data-dismiss="modal">
placeholder="Description" <span aria-hidden="true">&times;</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">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 available.
For additional information have a look at our
<a target="_blank" href="https://wiki.envipath.org/index.php/relative-reasoning" role="button">wiki
&gt;&gt;</a>
</div>
<!-- Name -->
<label for="model-name">Name</label>
<input id="model-name" name="model-name" class="form-control" placeholder="Name"/>
<!-- Model Type --> <!-- Description -->
<label for="model-type">Model Type</label> <label for="model-description">Description</label>
<select <input id="model-description" name="model-description" class="form-control"
id="model-type" placeholder="Description"/>
name="model-type"
class="form-control"
data-width="100%"
>
<option disabled selected>Select Model Type</option>
{% for k, v in model_types.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
</select>
<!-- Rule Packages --> <!-- Model Type -->
<div id="rule-packages" class="ep-model-param mlrr rbrr"> <label for="model-type">Model Type</label>
<label for="model-rule-packages">Rule Packages</label> <select id="model-type" name="model-type" class="form-control" data-width='100%'>
<select <option disabled selected>Select Model Type</option>
id="model-rule-packages" {% for k, v in model_types.items %}
name="model-rule-packages" <option value="{{ v }}">{{ k }}</option>
data-actions-box="true" {% endfor %}
class="form-control" </select>
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> <!-- Rule Packages -->
{% for obj in meta.readable_packages %} <div id="rule-packages" class="ep-model-param mlrr rbrr">
{% if not obj.reviewed %} <label for="model-rule-packages">Rule Packages</label>
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <select id="model-rule-packages" name="model-rule-packages" data-actions-box='true'
{% endif %} class="form-control" multiple data-width='100%'>
{% endfor %} <option disabled>Reviewed Packages</option>
</select> {% for obj in meta.readable_packages %}
</div> {% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<!-- Data Packages --> <option disabled>Unreviewed Packages</option>
<div id="data-packages" class="ep-model-param mlrr rbrr enviformer"> {% for obj in meta.readable_packages %}
<label for="model-data-packages">Data Packages</label> {% if not obj.reviewed %}
<select <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
id="model-data-packages" {% endif %}
name="model-data-packages" {% endfor %}
data-actions-box="true" </select>
class="form-control" </div>
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> <!-- Data Packages -->
{% for obj in meta.readable_packages %} <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
{% if not obj.reviewed %} <label for="model-data-packages">Data Packages</label>
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <select id="model-data-packages" name="model-data-packages" data-actions-box='true'
{% endif %} class="form-control" multiple data-width='100%'>
{% endfor %} <option disabled>Reviewed Packages</option>
</select> {% for obj in meta.readable_packages %}
</div> {% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<!-- Fingerprinter --> <option disabled>Unreviewed Packages</option>
<div id="fingerprinter" class="ep-model-param mlrr"> {% for obj in meta.readable_packages %}
<label for="model-fingerprinter">Fingerprinter</label> {% if not obj.reviewed %}
<select <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
id="model-fingerprinter" {% endif %}
name="model-fingerprinter" {% endfor %}
data-actions-box="true" </select>
class="form-control" </div>
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>
{% for k, v in additional_descriptors.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<!-- Threshold --> <!-- Fingerprinter -->
<div id="threshold" class="ep-model-param mlrr enviformer"> <div id="fingerprinter" class="ep-model-param mlrr">
<label for="model-threshold">Threshold</label> <label for="model-fingerprinter">Fingerprinter</label>
<input <select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
type="number" class="form-control" multiple data-width='100%'>
min="0" <option value="MACCS" selected>MACCS Fingerprinter</option>
max="1" {% if meta.enabled_features.PLUGINS and additional_descriptors %}
step="0.05" <option disabled selected>Select Additional Fingerprinter / Descriptor</option>
value="0.5" {% for k, v in additional_descriptors.items %}
id="model-threshold" <option value="{{ v }}">{{ k }}</option>
name="model-threshold" {% endfor %}
class="form-control" {% endif %}
/> </select>
</div> </div>
<div id="appdomain" class="ep-model-param mlrr"> <!-- Threshold -->
{% if meta.enabled_features.APPLICABILITY_DOMAIN %} <div id="threshold" class="ep-model-param mlrr enviformer">
<!-- Build AD? --> <label for="model-threshold">Threshold</label>
<div class="checkbox"> <input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
<label> name="model-threshold" class="form-control">
<input </div>
type="checkbox"
id="build-app-domain" <div id="appdomain" class="ep-model-param mlrr">
name="build-app-domain" {% if meta.enabled_features.APPLICABILITY_DOMAIN %}
/>Also build an Applicability Domain? <!-- Build AD? -->
</label> <div class="checkbox">
</div> <label>
<div id="ad-params" style="display:none"> <input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
<!-- Num Neighbors --> Applicability Domain?
<label for="num-neighbors">Number of Neighbors</label> </label>
<input </div>
id="num-neighbors" <div id="ad-params" style="display:none">
name="num-neighbors" <!-- Num Neighbors -->
type="number" <label for="num-neighbors">Number of Neighbors</label>
class="form-control" <input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
value="5" value="5"
step="1" step="1" min="0" max="10">
min="0" <!-- Local Compatibility -->
max="10" <label for="local-compatibility-threshold">Local Compatibility Threshold</label>
/> <input id="local-compatibility-threshold" name="local-compatibility-threshold"
<!-- Local Compatibility --> type="number"
<label for="local-compatibility-threshold" class="form-control" value="0.5" step="0.01" min="0" max="1">
>Local Compatibility Threshold</label <!-- Reliability -->
> <label for="reliability-threshold">Reliability Threshold</label>
<input <input id="reliability-threshold" name="reliability-threshold" type="number"
id="local-compatibility-threshold" class="form-control" value="0.5" step="0.01" min="0" max="1">
name="local-compatibility-threshold" </div>
type="number" {% endif %}
class="form-control" </div>
value="0.5" </form>
step="0.01" </div>
min="0" <div class="modal-footer">
max="1" <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>
<!-- Reliability --> </div>
<label for="reliability-threshold">Reliability Threshold</label> </div>
<input
id="reliability-threshold"
name="reliability-threshold"
type="number"
class="form-control"
value="0.5"
step="0.01"
min="0"
max="1"
/>
</div>
{% endif %}
</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>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
// Built in Model Types // Built in Model Types
var nativeModelTypes = ["mlrr", "rbrr", "enviformer"]; 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();
});
// 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> </script>

120
templates/modals/collections/new_package_modal.html
View File

@ -1,68 +1,62 @@
<div <div class="modal fade"
class="modal fade" tabindex="-1"
tabindex="-1" id="new_package_modal"
id="new_package_modal" role="dialog"
role="dialog" aria-labelledby="new_package_modal"
aria-labelledby="new_package_modal" aria-hidden="true">
aria-hidden="true" <div class="modal-dialog">
> <div class="modal-content">
<div class="modal-dialog"> <div class="modal-header">
<div class="modal-content"> <button type="button"
<div class="modal-header"> class="close"
<button type="button" class="close" data-dismiss="modal"> data-dismiss="modal">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title">New Package</h4> <h4 class="modal-title">New Package</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Create new package. Description can be changed later.</p> <p>Create new package. Description can be changed later.</p>
<form <form id="new_package_modal_form"
id="new_package_modal_form" accept-charset="UTF-8"
accept-charset="UTF-8" action=""
action="" data-remote="true"
data-remote="true" method="post">
method="post" {% csrf_token %}
> <p>
{% csrf_token %} <label for="name">Name</label>
<p> <input id="name" class="form-control"
<label for="name">Name</label> name="package-name"
<input placeholder="Name"/>
id="name" </p>
class="form-control" <p>
name="package-name" <label for="description">Description</label>
placeholder="Name" <input id="description"
/> type="text"
</p> rows="3"
<p> class="form-control"
<label for="description">Description</label> placeholder="Description..."
<input name="package-description"/>
id="description" </p>
type="text" </form>
rows="3" </div>
class="form-control" <div class="modal-footer">
placeholder="Description..." <a id="new_package_modal_form_submit"
name="package-description" class="btn btn-primary"
/> href="#">Submit</a>
</p> <button type="button"
</form> class="btn btn-default"
</div> data-dismiss="modal">Cancel
<div class="modal-footer"> </button>
<a id="new_package_modal_form_submit" class="btn btn-primary" href="#" </div>
>Submit</a </div>
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#new_package_modal_form_submit").on("click", function (e) { $('#new_package_modal_form_submit').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$("#new_package_modal_form").submit(); $('#new_package_modal_form').submit();
}); });
}); });
</script> </script>

576
templates/modals/collections/new_pathway_modal.html
View File

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

262
templates/modals/collections/new_prediction_setting_modal.html
View File

@ -1,185 +1,109 @@
{% load static %} {% load static %}
<div id="new_prediction_setting_modal" class="modal" tabindex="-1"> <div id="new_prediction_setting_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Create a Prediction Setting</h5> <h5 class="modal-title">Create a Prediction Setting</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>To create a Prediction Setting fill the form below and click "Create"</p>
<span aria-hidden="true">&times;</span> <form id="new-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true"
</button> method="post">
</div> {% csrf_token %}
<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 %}
<label for="prediction-setting-name">Name</label> <label for="prediction-setting-name">Name</label>
<input <input id="prediction-setting-name" name="prediction-setting-name" class="form-control" placeholder="Name"/>
id="prediction-setting-name" <label for="prediction-setting-description">Description</label>
name="prediction-setting-name" <input id="prediction-setting-description" name="prediction-setting-description" class="form-control"
class="form-control" placeholder="Description"/>
placeholder="Name"
/>
<label for="prediction-setting-description">Description</label>
<input
id="prediction-setting-description"
name="prediction-setting-description"
class="form-control"
placeholder="Description"
/>
<label for="prediction-setting-max-nodes">Max #Nodes</label> <label for="prediction-setting-max-nodes">Max #Nodes</label>
<input <input id="prediction-setting-max-nodes" type="number" class="form-control" name="prediction-setting-max-nodes" value="30" min="1" max="50" step="1">
id="prediction-setting-max-nodes" <label for="prediction-setting-max-depth">Max Depth</label>
type="number" <input id="prediction-setting-max-depth" type="number" class="form-control" name="prediction-setting-max-depth" value="5" min="1" max="8" step="1">
class="form-control"
name="prediction-setting-max-nodes"
value="30"
min="1"
max="50"
step="1"
/>
<label for="prediction-setting-max-depth">Max Depth</label>
<input
id="prediction-setting-max-depth"
type="number"
class="form-control"
name="prediction-setting-max-depth"
value="5"
min="1"
max="8"
step="1"
/>
<label for="tp-generation-method">TP Generation Method</label> <label for="tp-generation-method">TP Generation Method</label>
<select <select id="tp-generation-method" name="tp-generation-method" class="form-control" data-width='100%'>
id="tp-generation-method" <option disabled selected>Select how TPs are generated</option>
name="tp-generation-method" <option value="rule-based-prediction-setting">Rule Based</option>
class="form-control" <option value="model-based-prediction-setting">Model Based</option>
data-width="100%" </select>
> <div id="rule-based-prediction-setting-specific-form">
<option disabled selected>Select how TPs are generated</option> <!-- Rule Packages -->
<option value="rule-based-prediction-setting">Rule Based</option> <label>Rule Packages</label><br>
<option value="model-based-prediction-setting">Model Based</option> <select id="rule-based-prediction-setting-packages" name="rule-based-prediction-setting-packages"
</select> data-actions-box='true' class="form-control" multiple data-width='100%'>
<div id="rule-based-prediction-setting-specific-form"> <option disabled>Reviewed Packages</option>
<!-- Rule Packages --> {% for obj in meta.readable_packages %}
<label>Rule Packages</label><br /> {% if obj.reviewed %}
<select <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
id="rule-based-prediction-setting-packages" {% endif %}
name="rule-based-prediction-setting-packages" {% endfor %}
data-actions-box="true"
class="form-control"
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> <option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %} {% for obj in meta.readable_packages %}
{% if not obj.reviewed %} {% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div id="model-based-prediction-setting-specific-form"> <div id="model-based-prediction-setting-specific-form">
<label>Select Model</label><br /> <label>Select Model</label><br>
<select <select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
id="model-based-prediction-setting-model" <option disabled selected>Select the model</option>
name="model-based-prediction-setting-model" {% for m in models %}
class="form-control" <option value="{{ m.url }}">{{ m.name|safe }}</option>
data-width="100%" {% endfor %}
> </select>
<option disabled selected>Select the model</option> <label for="model-based-prediction-setting-threshold">Threshold</label>
{% for m in models %} <input id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="form-control" placeholder="0.25" type="number"/>
<option value="{{ m.url }}">{{ m.name|safe }}</option> </div>
{% endfor %}
</select>
<label for="model-based-prediction-setting-threshold"
>Threshold</label
>
<input
id="model-based-prediction-setting-threshold"
name="model-based-prediction-setting-threshold"
class="form-control"
placeholder="0.25"
type="number"
/>
</div>
<input <input class="form-check-input" type="checkbox" value="on" id="prediction-setting-new-default" name="prediction-setting-new-default">
class="form-check-input" <label class="form-check-label" for="prediction-setting-new-default">Set this setting as new default</label>
type="checkbox"
value="on" </form>
id="prediction-setting-new-default" </div>
name="prediction-setting-new-default" <div class="modal-footer">
/> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<label class="form-check-label" for="prediction-setting-new-default" <button type="button" class="btn btn-primary" id="new-prediction-setting-modal-submit">Create</button>
>Set this setting as new default</label </div>
> </div>
</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> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
// Initially hide all "specific" forms
$("div[id$='-specific-form']").each(function () {
$(this).hide();
});
$("#rule-based-prediction-setting-packages").selectpicker(); // Initially hide all "specific" forms
$("div[id$='-specific-form']").each( function() {
$(this).hide();
});
// On change hide all and show only selected $("#rule-based-prediction-setting-packages").selectpicker();
$("#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) { // On change hide all and show only selected
e.preventDefault(); $("#tp-generation-method").change(function() {
// $('#new-prediction-setting-modal-form').submit(); $("div[id$='-specific-form']").each( function() {
$(this).hide();
});
val = $('option:selected', this).val();
$("#" + val + "-specific-form").show();
});
const formData = $("#new-prediction-setting-modal-form").serialize(); $('#new-prediction-setting-modal-submit').click(function(e){
$.post("/setting", formData, function (response) { e.preventDefault();
location.reload(); // $('#new-prediction-setting-modal-form').submit();
});
}); const formData = $('#new-prediction-setting-modal-form').serialize();
}); $.post('/setting', formData, function(response) {
location.reload();
});
});
})
</script> </script>

125
templates/modals/collections/new_reaction_modal.html
View File

@ -1,91 +1,50 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="new_reaction_modal" tabindex="-1" aria-labelledby="new_reaction_modal" aria-modal="true"
class="modal fade bs-modal-lg" role="dialog">
id="new_reaction_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="new_reaction_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">×</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Create a new Reaction</h4>
<div class="modal-content"> </div>
<div class="modal-header"> <div class="modal-body">
<button <form id="new_reaction_modal_form" accept-charset="UTF-8" action="{% url 'package reaction list' meta.current_package.uuid %}" data-remote="true" method="post">
type="button" {% csrf_token %}
class="close" <label for="reaction-name">Name</label>
data-dismiss="modal" <input id="reaction-name" class="form-control" name="reaction-name" placeholder="Name"/>
aria-label="Close" <label for="reaction-description">Description</label>
> <input id="reaction-description" class="form-control" name="reaction-description" placeholder="Description"/>
<span aria-hidden="true">×</span> <p></p>
</button> <div>
<h4 class="modal-title">Create a new Reaction</h4> <iframe id="new_reaction_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
</div> height="510"></iframe>
<div class="modal-body"> </div>
<form <input type="hidden" name="reaction-smirks" id="reaction-smirks">
id="new_reaction_modal_form" <p></p>
accept-charset="UTF-8" </form>
action="{% url 'package reaction list' meta.current_package.uuid %}" </div>
data-remote="true" <div class="modal-footer">
method="post" <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
> </button>
{% csrf_token %} <button type="button" class="btn btn-primary" id="new_reaction_modal_form_submit">Submit</button>
<label for="reaction-name">Name</label> </div>
<input </div>
id="reaction-name"
class="form-control"
name="reaction-name"
placeholder="Name"
/>
<label for="reaction-description">Description</label>
<input
id="reaction-description"
class="form-control"
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>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#new_reaction_modal_form_submit").on("click", function (e) { $('#new_reaction_modal_form_submit').on('click', function(e) {
e.preventDefault(); e.preventDefault();
$(this).prop("disabled", true); $(this).prop("disabled",true);
k = getKetcher("new_reaction_ketcher"); k = getKetcher('new_reaction_ketcher');
$("#reaction-smirks").val(k.getSmiles()); $('#reaction-smirks').val(k.getSmiles());
// submit form // submit form
$("#new_reaction_modal_form").submit(); $('#new_reaction_modal_form').submit();
}); });
}); });
</script> </script>

160
templates/modals/collections/new_rule_modal.html
View File

@ -1,120 +1,72 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="new_rule_modal" tabindex="-1" aria-labelledby="new_rule_modal" aria-modal="true"
class="modal fade bs-modal-lg" role="dialog">
id="new_rule_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="new_rule_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">×</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Create a new Rule</h4>
<div class="modal-content"> </div>
<div class="modal-header"> <div class="modal-body">
<button <form id="new_rule_modal_form" accept-charset="UTF-8" action="{% url 'package rule list' meta.current_package.uuid %}" data-remote="true" method="post">
type="button" {% csrf_token %}
class="close" <label for="rule-name">Name</label>
data-dismiss="modal" <input id="rule-name" class="form-control" name="rule-name" placeholder="Name"/>
aria-label="Close" <label for="rule-description">Description</label>
> <input id="rule-description" class="form-control" name="rule-description" placeholder="Description"/>
<span aria-hidden="true">×</span> <label for="rule-smirks">SMIRKS</label>
</button> <input id="rule-smirks" class="form-control" name="rule-smirks" placeholder="SMIRKS"/>
<h4 class="modal-title">Create a new Rule</h4> <p></p>
</div> <div id="rule-smirks-viz"></div>
<div class="modal-body"> <input type="hidden" name="rule-type" id="rule-type" value="SimpleAmbitRule">
<form <p></p>
id="new_rule_modal_form" </form>
accept-charset="UTF-8" </div>
action="{% url 'package rule list' meta.current_package.uuid %}" <div class="modal-footer">
data-remote="true" <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
method="post" </button>
> <button type="button" class="btn btn-primary" id="new_rule_modal_form_submit">Submit</button>
{% csrf_token %} </div>
<label for="rule-name">Name</label> </div>
<input
id="rule-name"
class="form-control"
name="rule-name"
placeholder="Name"
/>
<label for="rule-description">Description</label>
<input
id="rule-description"
class="form-control"
name="rule-description"
placeholder="Description"
/>
<label for="rule-smirks">SMIRKS</label>
<input
id="rule-smirks"
class="form-control"
name="rule-smirks"
placeholder="SMIRKS"
/>
<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>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#rule-smirks").on("input", function (e) {
$("#rule-smirks-viz").empty();
smirks = $("#rule-smirks").val(); $('#rule-smirks').on('input', function(e) {
$('#rule-smirks-viz').empty()
const img = new Image(); smirks = $('#rule-smirks').val()
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 () { const img = new Image();
$("#rule-smirks-viz").append(img); img.src = "{% url 'depict' %}?is_query_smirks=true&smirks=" + encodeURIComponent(smirks);
}; img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.onerror = function () { img.onload = function () {
error_tpl = ` $('#rule-smirks-viz').append(img);
};
img.onerror = function () {
error_tpl = `
<div class="alert alert-error" role="alert"> <div class="alert alert-error" role="alert">
<h4 class="alert-heading">Could not render SMIRKS!</h4> <h4 class="alert-heading">Could not render SMIRKS!</h4>
<p>Could not render SMIRKS - Have you entered a valid SMIRKS?</a> <p>Could not render SMIRKS - Have you entered a valid SMIRKS?</a>
</p> </p>
</div>`; </div>`
$("#rule-smirks-viz").append(error_tpl); $('#rule-smirks-viz').append(error_tpl);
}; };
}); });
$("#new_rule_modal_form_submit").on("click", function (e) { $('#new_rule_modal_form_submit').on('click', function(e) {
e.preventDefault(); e.preventDefault();
$(this).prop("disabled", true); $(this).prop("disabled",true);
// submit form // submit form
$("#new_rule_modal_form").submit(); $('#new_rule_modal_form').submit();
}); });
}); });
</script> </script>

239
templates/modals/collections/new_scenario_modal.html
View File

@ -1,153 +1,102 @@
<div <div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_modal"
class="modal fade" aria-hidden="true">
tabindex="-1" <div class="modal-dialog modal-lg">
id="new_scenario_modal" <div class="modal-content">
role="dialog" <div class="modal-header">
aria-labelledby="new_scenario_modal" <button type="button" class="close" data-dismiss="modal">
aria-hidden="true" <span aria-hidden="true">&times;</span>
> <span class="sr-only">Close</span>
<div class="modal-dialog modal-lg"> </button>
<div class="modal-content"> <h4 class="modal-title">New Scenario</h4>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</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">
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
fields but the name empty and fill them in later.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/scenario"
role="button"
>wiki &gt;&gt;</a
>
</div>
<label for="scenario-name">Name</label>
<input
id="scenario-name"
name="scenario-name"
class="form-control"
placeholder="Name"
/>
<label for="scenario-description">Description</label>
<input
id="scenario-description"
name="scenario-description"
class="form-control"
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>
<select
id="scenario-type"
name="scenario-type"
class="form-control"
data-width="100%"
>
<option value="empty" selected>Empty Scenario</option>
{% for k, v in scenario_types.items %}
<option value="{{ v.name }}">{{ k }}</option>
{% endfor %}
</select>
{% for type in scenario_types.values %}
<div id="{{ type.name }}-specific-inputs">
{% for widget in type.widgets %}
{{ widget|safe }}
{% endfor %}
</div> </div>
{% endfor %} <div class="modal-body">
</form> <form id="new_scenario_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/scenario"
</div> data-remote="true" method="post">
<div class="modal-footer"> {% csrf_token %}
<a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#" <div class="jumbotron">Please enter name, description, and date of scenario. Date should be
>Submit</a associated to the data, not the current date. For example, this could reflect the publishing
> date of a study. You can leave all fields but the name empty and fill them in later.
<button type="button" class="btn btn-default" data-dismiss="modal"> <a target="_blank" href="https://wiki.envipath.org/index.php/scenario" role="button">wiki
Cancel &gt;&gt;</a>
</button> </div>
</div> <label for="scenario-name">Name</label>
<input id="scenario-name" name="scenario-name" class="form-control" placeholder="Name"/>
<label for="scenario-description">Description</label>
<input id="scenario-description" name="scenario-description" class="form-control"
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>
<select id="scenario-type" name="scenario-type" class="form-control" data-width='100%'>
<option value="empty" selected>Empty Scenario</option>
{% for k, v in scenario_types.items %}
<option value="{{ v.name }}">{{ k }}</option>
{% endfor %}
</select>
{% 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>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
// Initially hide all "specific" forms // Initially hide all "specific" forms
$("div[id$='-specific-inputs']").each(function () { $("div[id$='-specific-inputs']").each(function () {
$(this).hide(); $(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 = {% now "Y" %};
}
});
}); });
// 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> </script>

133
templates/modals/objects/add_additional_information_modal.html
View File

@ -1,92 +1,61 @@
{% load static %} {% load static %}
<!-- Add Additional Information--> <!-- Add Additional Information-->
<div id="add_additional_information_modal" class="modal" tabindex="-1"> <div id="add_additional_information_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" <h3 class="modal-title">Add Additional Information</h3>
aria-label="Close" </div>
> <div class="modal-body">
<span aria-hidden="true">&times;</span> <select id="select-additional-information-type" data-actions-box='true' class="form-control" data-width='100%'>
</button> <option selected disabled>Select the type to add</option>
<h3 class="modal-title">Add Additional Information</h3> {% for add_inf in available_additional_information %}
</div> <option value="{{ add_inf.name }}">{{ add_inf.display_name }}</option>
<div class="modal-body"> {% endfor %}
<select </select>
id="select-additional-information-type" {% for add_inf in available_additional_information %}
data-actions-box="true" <div class="aiform {{ add_inf.name }}" style="display: none;">
class="form-control" <form id="add_{{ add_inf.name }}_add-additional-information-modal-form" accept-charset="UTF-8"
data-width="100%" action="" data-remote="true" method="post">
> {% csrf_token %}
<option selected disabled>Select the type to add</option> {{ add_inf.widget|safe }}
{% for add_inf in available_additional_information %} <input type="hidden" name="hidden" value="add-additional-information">
<option value="{{ add_inf.name }}"> </form>
{{ add_inf.display_name }} </div>
</option> {% endfor %}
{% endfor %} </div>
</select> <div class="modal-footer">
{% for add_inf in available_additional_information %} <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<div class="aiform {{ add_inf.name }}" style="display: none;"> <button type="button" class="btn btn-primary" id="add-additional-information-modal-submit">Add
<form </button>
id="add_{{ add_inf.name }}_add-additional-information-modal-form" </div>
accept-charset="UTF-8" </div>
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
{{ add_inf.widget|safe }}
<input
type="hidden"
name="hidden"
value="add-additional-information"
/>
</form>
</div>
{% endfor %}
</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="add-additional-information-modal-submit"
>
Add
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#select-additional-information-type").change(function (e) {
var selectedType = $( $('#select-additional-information-type').change(function(e){
"#select-additional-information-type :selected", var selectedType = $("#select-additional-information-type :selected").val();
).val(); $('.aiform').hide();
$(".aiform").hide(); $('.' + selectedType).show();
$("." + selectedType).show(); })
$('#add-additional-information-modal-submit').click(function(e){
e.preventDefault();
var selectedType = $("#select-additional-information-type :selected").val();
console.log(selectedType);
if (selectedType !== null && selectedType !== undefined && selectedType !== '') {
$('.' + selectedType + ' >form').submit();
}
}); });
$("#add-additional-information-modal-submit").click(function (e) { });
e.preventDefault();
var selectedType = $(
"#select-additional-information-type :selected",
).val();
console.log(selectedType);
if (
selectedType !== null &&
selectedType !== undefined &&
selectedType !== ""
) {
$("." + selectedType + " >form").submit();
}
});
});
</script> </script>

271
templates/modals/objects/add_pathway_edge_modal.html
View File

@ -1,174 +1,127 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
class="modal fade bs-modal-lg" aria-modal="true"
id="add_pathway_edge_modal" role="dialog">
tabindex="-1" <div class="modal-dialog modal-lg">
aria-labelledby="add_pathway_edge_modal" <div class="modal-content">
aria-modal="true" <div class="modal-header">
role="dialog" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
> <span aria-hidden="true">&times;</span>
<div class="modal-dialog modal-lg"> </button>
<div class="modal-content"> <h4 class="modal-title">Add a Reaction</h4>
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Add a Reaction</h4>
</div>
<div class="modal-body">
<form
id="add_pathway_edge_modal_form"
accept-charset="UTF-8"
action="{% url 'package pathway edge list' meta.current_package.uuid pathway.uuid %}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="edge-name">Name</label>
<input
id="edge-name"
class="form-control"
name="edge-name"
placeholder="Name"
/>
<label for="edge-description">Description</label>
<input
id="edge-description"
class="form-control"
name="edge-description"
placeholder="Description"
/>
<p></p>
<div class="row">
<div class="col-xs-5">
<legend>Substrate(s)</legend>
</div> </div>
<div class="col-xs-2"></div> <div class="modal-body">
<div class="col-xs-5"> <form id="add_pathway_edge_modal_form" accept-charset="UTF-8"
<legend>Product(s)</legend> action="{% url 'package pathway edge list' meta.current_package.uuid pathway.uuid %}"
data-remote="true" method="post">
{% csrf_token %}
<label for="edge-name">Name</label>
<input id="edge-name" class="form-control" name="edge-name" placeholder="Name"/>
<label for="edge-description">Description</label>
<input id="edge-description" class="form-control" name="edge-description" placeholder="Description"/>
<p></p>
<div class="row">
<div class="col-xs-5">
<legend>Substrate(s)</legend>
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<legend>Product(s)</legend>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<select id="add_pathway_edge_substrates" name="edge-substrates"
data-actions-box='true' class="form-control" multiple data-width='100%'>
{% for n in pathway.nodes %}
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2" style="display: flex; justify-content: center; align-items: center;">
<i class="glyphicon glyphicon-arrow-right"></i>
</div>
<div class="col-xs-5">
<select id="add_pathway_edge_products" name="edge-products"
data-actions-box='true' class="form-control" multiple data-width='100%'>
{% for n in pathway.nodes %}
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<p></p>
<div class="col-xs-12" id="reaction_image">
</div>
</div>
</form>
</div> </div>
</div> <div class="modal-footer">
<div class="row"> <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
<div class="col-xs-5"> </button>
<select <button type="button" class="btn btn-primary" id="add_pathway_edge_modal_form_submit">Submit</button>
id="add_pathway_edge_substrates"
name="edge-substrates"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
{% for n in pathway.nodes %}
<option
data-smiles="{{ n.default_node_label.smiles }}"
value="{{ n.url }}"
>
{{ n.default_node_label.name|safe }}
</option>
{% endfor %}
</select>
</div> </div>
<div </div>
class="col-xs-2"
style="display: flex; justify-content: center; align-items: center;"
>
<i class="glyphicon glyphicon-arrow-right"></i>
</div>
<div class="col-xs-5">
<select
id="add_pathway_edge_products"
name="edge-products"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
{% for n in pathway.nodes %}
<option
data-smiles="{{ n.default_node_label.smiles }}"
value="{{ n.url }}"
>
{{ n.default_node_label.name|safe }}
</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<p></p>
<div class="col-xs-12" id="reaction_image"></div>
</div>
</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="add_pathway_edge_modal_form_submit"
>
Submit
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
function reactionImage() {
var substrates = [];
$("#add_pathway_edge_substrates option:selected").each(function () {
var smiles = $(this).data("smiles"); // read data-smiles attribute
substrates.push(smiles);
});
var products = []; function reactionImage() {
$("#add_pathway_edge_products option:selected").each(function () { var substrates = [];
var smiles = $(this).data("smiles"); // read data-smiles attribute $('#add_pathway_edge_substrates option:selected').each(function () {
products.push(smiles); var smiles = $(this).data('smiles'); // read data-smiles attribute
}); substrates.push(smiles);
});
if (substrates.length > 0 && products.length > 0) { var products = []
reaction = substrates.join(".") + ">>" + products.join("."); $('#add_pathway_edge_products option:selected').each(function () {
$("#reaction_image").empty(); var smiles = $(this).data('smiles'); // read data-smiles attribute
$("#reaction_image").append( products.push(smiles);
"<img width='100%' src='{% url 'depict' %}?smirks=" + });
encodeURIComponent(reaction) +
"'>", if (substrates.length > 0 && products.length > 0) {
); reaction = substrates.join('.') + ">>" + products.join('.');
$('#reaction_image').empty();
$('#reaction_image').append(
"<img width='100%' src='{% url 'depict' %}?smirks=" + encodeURIComponent(reaction) +"'>"
);
}
} }
}
$(function () {
$("#add_pathway_edge_substrates").selectpicker();
$("#add_pathway_edge_products").selectpicker();
$("#add_pathway_edge_substrates").on("change", function (e) {
reactionImage();
});
$("#add_pathway_edge_products").on("change", function (e) {
reactionImage();
});
$(function () { $(function () {
$("#add_pathway_edge_modal_form_submit").on("click", function (e) { $("#add_pathway_edge_substrates").selectpicker();
e.preventDefault(); $("#add_pathway_edge_products").selectpicker();
$(this).prop("disabled", true);
$("#add_pathway_edge_substrates").on('change', function (e) {
reactionImage();
})
$("#add_pathway_edge_products").on('change', function (e) {
reactionImage();
})
$(function () {
$('#add_pathway_edge_modal_form_submit').on('click', function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#add_pathway_edge_modal_form').submit();
});
});
// submit form
$("#add_pathway_edge_modal_form").submit();
});
}); });
});
</script> </script>

177
templates/modals/objects/add_pathway_node_modal.html
View File

@ -1,119 +1,78 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="add_pathway_node_modal" tabindex="-1" aria-labelledby="add_pathway_node_modal" aria-modal="true"
class="modal fade bs-modal-lg" role="dialog">
id="add_pathway_node_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="add_pathway_node_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">&times;</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Add a Node</h4>
<div class="modal-content"> </div>
<div class="modal-header"> <div class="modal-body">
<button <form id="add_pathway_node_modal_form" accept-charset="UTF-8" action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}" data-remote="true" method="post">
type="button" {% csrf_token %}
class="close" <label for="node-name">Name</label>
data-dismiss="modal" <input id="node-name" class="form-control" name="node-name" placeholder="Name"/>
aria-label="Close" <label for="node-description">Description</label>
> <input id="node-description" class="form-control" name="node-description" placeholder="Description"/>
<span aria-hidden="true">&times;</span> <label for="node-smiles">SMILES</label>
</button> <input type="text" class="form-control" name="node-smiles" placeholder="SMILES" id="node-smiles">
<h4 class="modal-title">Add a Node</h4> <p></p>
</div> <div>
<div class="modal-body"> <iframe id="add_node_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
<form height="510"></iframe>
id="add_pathway_node_modal_form" </div>
accept-charset="UTF-8" <p></p>
action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}" </form>
data-remote="true" </div>
method="post" <div class="modal-footer">
> <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
{% csrf_token %} </button>
<label for="node-name">Name</label> <button type="button" class="btn btn-primary" id="add_pathway_node_modal_form_submit">Submit</button>
<input </div>
id="node-name" </div>
class="form-control"
name="node-name"
placeholder="Name"
/>
<label for="node-description">Description</label>
<input
id="node-description"
class="form-control"
name="node-description"
placeholder="Description"
/>
<label for="node-smiles">SMILES</label>
<input
type="text"
class="form-control"
name="node-smiles"
placeholder="SMILES"
id="node-smiles"
/>
<p></p>
<div>
<iframe
id="add_node_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="add_pathway_node_modal_form_submit"
>
Submit
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
function newStructureModalketcherToNewStructureModalTextInput() {
$("#node-smiles").val(this.ketcher.getSmiles());
}
$(function () { function newStructureModalketcherToNewStructureModalTextInput() {
$("#add_node_ketcher").on("load", function () { $('#node-smiles').val(this.ketcher.getSmiles());
const checkKetcherReady = () => { }
win = this.contentWindow;
if (win.ketcher && "editor" in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady(); $(function() {
$('#add_node_ketcher').on('load', function() {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady();
})
$(function() {
$('#add_pathway_node_modal_form_submit').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled",true);
// submit form
$('#add_pathway_node_modal_form').submit();
});
}); });
$(function () { });
$("#add_pathway_node_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#add_pathway_node_modal_form").submit();
});
});
});
</script> </script>

177
templates/modals/objects/add_structure_modal.html
View File

@ -1,119 +1,78 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="add_structure_modal" tabindex="-1" aria-labelledby="add_structure_modal" aria-modal="true"
class="modal fade bs-modal-lg" role="dialog">
id="add_structure_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="add_structure_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">×</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Create a new Structure</h4>
<div class="modal-content"> </div>
<div class="modal-header"> <div class="modal-body">
<button <form id="add_structure_modal_form" accept-charset="UTF-8" action="{% url 'package compound structure list' meta.current_package.uuid compound.uuid %}" data-remote="true" method="post">
type="button" {% csrf_token %}
class="close" <label for="structure-name">Name</label>
data-dismiss="modal" <input id="structure-name" class="form-control" name="structure-name" placeholder="Name"/>
aria-label="Close" <label for="structure-description">Description</label>
> <input id="structure-description" class="form-control" name="structure-description" placeholder="Description"/>
<span aria-hidden="true">×</span> <label for="structure-smiles">SMILES</label>
</button> <input type="text" class="form-control" name="structure-smiles" placeholder="SMILES" id="structure-smiles">
<h4 class="modal-title">Create a new Structure</h4> <p></p>
</div> <div>
<div class="modal-body"> <iframe id="add_structure_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
<form height="510"></iframe>
id="add_structure_modal_form" </div>
accept-charset="UTF-8" <p></p>
action="{% url 'package compound structure list' meta.current_package.uuid compound.uuid %}" </form>
data-remote="true" </div>
method="post" <div class="modal-footer">
> <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
{% csrf_token %} </button>
<label for="structure-name">Name</label> <button type="button" class="btn btn-primary" id="add_structure_modal_form_submit">Submit</button>
<input </div>
id="structure-name" </div>
class="form-control"
name="structure-name"
placeholder="Name"
/>
<label for="structure-description">Description</label>
<input
id="structure-description"
class="form-control"
name="structure-description"
placeholder="Description"
/>
<label for="structure-smiles">SMILES</label>
<input
type="text"
class="form-control"
name="structure-smiles"
placeholder="SMILES"
id="structure-smiles"
/>
<p></p>
<div>
<iframe
id="add_structure_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="add_structure_modal_form_submit"
>
Submit
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
function newStructureModalketcherToNewStructureModalTextInput() {
$("#structure-smiles").val(this.ketcher.getSmiles());
}
$(function () { function newStructureModalketcherToNewStructureModalTextInput() {
$("#add_structure_ketcher").on("load", function () { $('#structure-smiles').val(this.ketcher.getSmiles());
const checkKetcherReady = () => { }
win = this.contentWindow;
if (win.ketcher && "editor" in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady(); $(function() {
$('#add_structure_ketcher').on('load', function() {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady();
})
$(function() {
$('#add_structure_modal_form_submit').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled",true);
// submit form
$('#add_structure_modal_form').submit();
});
}); });
$(function () { });
$("#add_structure_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#add_structure_modal_form").submit();
});
});
});
</script> </script>

131
templates/modals/objects/delete_pathway_edge_modal.html
View File

@ -1,89 +1,66 @@
{% load static %} {% load static %}
<!-- Delete Edge --> <!-- Delete Edge -->
<div id="delete_pathway_edge_modal" class="modal" tabindex="-1"> <div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Delete Edge</h3> <h3 class="modal-title">Delete Edge</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> Deletes the Edge. Nodes referenced by this edge will remain.
<span aria-hidden="true">&times;</span> <p></p>
</button> <form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true"
</div> method="post">
<div class="modal-body"> {% csrf_token %}
Deletes the Edge. Nodes referenced by this edge will remain. <select id="delete_pathway_edge_edges" name="edge-url"
<p></p> data-actions-box='true' class="form-control" data-width='100%'>
<form <option value="" disabled selected>Select Reaction to delete</option>
id="delete-pathway-edge-modal-form" {% for e in pathway.edges %}
accept-charset="UTF-8" <option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
action="" {% endfor %}
data-remote="true" </select>
method="post" <input type="hidden" id="hidden" name="hidden" value="delete"/>
> </form>
{% csrf_token %} <p></p>
<select <div id="delete_pathway_edge_image"></div>
id="delete_pathway_edge_edges" </div>
name="edge-url" <div class="modal-footer">
data-actions-box="true" <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
class="form-control" <button type="button" class="btn btn-primary" id="delete-pathway-edge-modal-submit">Delete</button>
data-width="100%" </div>
> </div>
<option value="" disabled selected>
Select Reaction to delete
</option>
{% for e in pathway.edges %}
<option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" id="hidden" name="hidden" value="delete" />
</form>
<p></p>
<div id="delete_pathway_edge_image"></div>
</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="delete-pathway-edge-modal-submit"
>
Delete
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#delete_pathway_edge_edges").selectpicker(); $("#delete_pathway_edge_edges").selectpicker();
$("#delete_pathway_edge_edges").on("change", function (e) { $("#delete_pathway_edge_edges").on('change', function (e) {
edge_url = $("#delete_pathway_edge_edges option:selected").val(); edge_url = $('#delete_pathway_edge_edges option:selected').val()
if (edge_url !== "") { if (edge_url !== "") {
$("#delete_pathway_edge_image").empty(); $('#delete_pathway_edge_image').empty();
$("#delete_pathway_edge_image").append( $('#delete_pathway_edge_image').append(
"<img width='100%' src='" + edge_url + "?image=svg'>", "<img width='100%' src='" + edge_url + "?image=svg'>"
); );
} }
}); })
$("#delete-pathway-edge-modal-submit").click(function (e) { $('#delete-pathway-edge-modal-submit').click(function (e) {
e.preventDefault(); e.preventDefault();
edge_url = $("#delete_pathway_edge_edges option:selected").val(); edge_url = $('#delete_pathway_edge_edges option:selected').val()
if (edge_url === "") { if (edge_url === "") {
return; return;
} }
$("#delete-pathway-edge-modal-form").attr("action", edge_url); $('#delete-pathway-edge-modal-form').attr('action', edge_url)
$("#delete-pathway-edge-modal-form").submit(); $('#delete-pathway-edge-modal-form').submit();
}); });
});
})
</script> </script>

133
templates/modals/objects/delete_pathway_node_modal.html
View File

@ -2,92 +2,65 @@
<!-- Delete Node --> <!-- Delete Node -->
<div id="delete_pathway_node_modal" class="modal" tabindex="-1"> <div id="delete_pathway_node_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Delete Node</h3> <h3 class="modal-title">Delete Node</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> Deletes the Node. Edges having this Node as Substrate or Product will be removed as well.
<span aria-hidden="true">&times;</span> <p></p>
</button> <form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true"
</div> method="post">
<div class="modal-body"> {% csrf_token %}
Deletes the Node. Edges having this Node as Substrate or Product will be <select id="delete_pathway_node_nodes" name="node-url"
removed as well. data-actions-box='true' class="form-control" data-width='100%'>
<p></p> <option value="" disabled selected>Select Compound to delete</option>
<form {% for n in pathway.nodes %}
id="delete-pathway-node-modal-form" <option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
accept-charset="UTF-8" {% endfor %}
action="" </select>
data-remote="true" <input type="hidden" id="hidden" name="hidden" value="delete"/>
method="post" </form>
> <p></p>
{% csrf_token %} <div id="delete_pathway_node_image"></div>
<select </div>
id="delete_pathway_node_nodes" <div class="modal-footer">
name="node-url" <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
data-actions-box="true" <button type="button" class="btn btn-primary" id="delete-pathway-node-modal-submit">Delete</button>
class="form-control" </div>
data-width="100%" </div>
>
<option value="" disabled selected>
Select Compound to delete
</option>
{% for n in pathway.nodes %}
<option value="{{ n.url }}">
{{ n.default_node_label.name|safe }}
</option>
{% endfor %}
</select>
<input type="hidden" id="hidden" name="hidden" value="delete" />
</form>
<p></p>
<div id="delete_pathway_node_image"></div>
</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="delete-pathway-node-modal-submit"
>
Delete
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#delete_pathway_node_nodes").selectpicker(); $("#delete_pathway_node_nodes").selectpicker();
$("#delete_pathway_node_nodes").on("change", function (e) { $("#delete_pathway_node_nodes").on('change', function (e) {
node_url = $("#delete_pathway_node_nodes option:selected").val(); node_url = $('#delete_pathway_node_nodes option:selected').val()
if (node_url !== "") { if (node_url !== "") {
$("#delete_pathway_node_image").empty(); $('#delete_pathway_node_image').empty();
$("#delete_pathway_node_image").append( $('#delete_pathway_node_image').append(
"<img width='100%' src='" + node_url + "?image=svg'>", "<img width='100%' src='" + node_url + "?image=svg'>"
); );
} }
}); })
$("#delete-pathway-node-modal-submit").click(function (e) { $('#delete-pathway-node-modal-submit').click(function (e) {
e.preventDefault(); e.preventDefault();
node_url = $("#delete_pathway_node_nodes option:selected").val(); node_url = $('#delete_pathway_node_nodes option:selected').val()
if (node_url === "") { if (node_url === "") {
return; return;
} }
$("#delete-pathway-node-modal-form").attr("action", node_url); $('#delete-pathway-node-modal-form').attr('action', node_url)
$("#delete-pathway-node-modal-form").submit(); $('#delete-pathway-node-modal-form').submit();
}); });
});
})
</script> </script>

75
templates/modals/objects/download_pathway_csv_modal.html
View File

@ -1,53 +1,36 @@
{% load static %} {% load static %}
<!-- Download Pathway --> <!-- Download Pathway -->
<div id="download_pathway_csv_modal" class="modal" tabindex="-1"> <div id="download_pathway_csv_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Download Pathway as CSV</h3> <h3 class="modal-title">Download Pathway as CSV</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> By clicking on Download the Pathway will be converted into a CSV and directly downloaded.
<span aria-hidden="true">&times;</span> <form id="download-pathway-csv-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
</button> data-remote="true" method="GET">
</div> <input type="hidden" name="download" value="true"/>
<div class="modal-body"> </form>
By clicking on Download the Pathway will be converted into a CSV and </div>
directly downloaded. <div class="modal-footer">
<form <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="download-pathway-csv-modal-form" <button type="button" class="btn btn-primary" id="download-pathway-csv-modal-submit">Download</button>
accept-charset="UTF-8" </div>
action="{{ pathway.url }}" </div>
data-remote="true"
method="GET"
>
<input type="hidden" name="download" value="true" />
</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="download-pathway-csv-modal-submit"
>
Download
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#download-pathway-csv-modal-submit").click(function (e) {
e.preventDefault(); $('#download-pathway-csv-modal-submit').click(function (e) {
$("#download-pathway-csv-modal-form").submit(); e.preventDefault();
$("#download_pathway_csv_modal").modal("hide"); $('#download-pathway-csv-modal-form').submit();
}); $('#download_pathway_csv_modal').modal('hide');
}); });
})
</script> </script>

61
templates/modals/objects/download_pathway_image_modal.html
View File

@ -1,43 +1,32 @@
{% load static %} {% load static %}
<!-- Download Pathway --> <!-- Download Pathway -->
<div id="download_pathway_image_modal" class="modal" tabindex="-1"> <div id="download_pathway_image_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Download Pathway as Image</h3> <h3 class="modal-title">Download Pathway as Image</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> By clicking on Download the Pathway will be saved as SVG.
<span aria-hidden="true">&times;</span> </div>
</button> <div class="modal-footer">
</div> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<div class="modal-body"> <button type="button" class="btn btn-primary" id="download-pathway-image-modal-submit">Download</button>
By clicking on Download the Pathway will be saved as SVG. </div>
</div> </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="download-pathway-image-modal-submit"
>
Download
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#download-pathway-image-modal-submit").click(function (e) {
e.preventDefault(); $('#download-pathway-image-modal-submit').click(function (e) {
downloadSVG($("#pwsvg")[0], '{{ pathway.name.split|join:"_" }}.svg'); e.preventDefault();
$("#download_pathway_image_modal").modal("hide"); downloadSVG($('#pwsvg')[0], '{{ pathway.name.split|join:"_" }}.svg')
}); $('#download_pathway_image_modal').modal('hide');
}); });
})
</script> </script>

103
templates/modals/objects/edit_compound_modal.html
View File

@ -1,70 +1,47 @@
{% load static %} {% load static %}
<!-- Edit Compound --> <!-- Edit Compound -->
<div id="edit_compound_modal" class="modal" tabindex="-1"> <div id="edit_compound_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Edit Compound</h5> <h5 class="modal-title">Edit Compound</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Edit Compound.</p>
<span aria-hidden="true">&times;</span> <form id="edit-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="compound-name">Name</label>
<p>Edit Compound.</p> <input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name|safe}}">
<form </p>
id="edit-compound-modal-form" <p>
accept-charset="UTF-8" <label for="compound-description">Description</label>
action="" <input id="compound-description" type="text" class="form-control"
data-remote="true" value="{{ compound.description|safe }}"
method="post" name="compound-description">
> </p>
{% csrf_token %} </form>
<p> </div>
<label for="compound-name">Name</label> <div class="modal-footer">
<input <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="compound-name" <button type="button" class="btn btn-primary" id="edit-compound-modal-submit">Update</button>
class="form-control" </div>
name="compound-name" </div>
value="{{ compound.name|safe }}"
/>
</p>
<p>
<label for="compound-description">Description</label>
<input
id="compound-description"
type="text"
class="form-control"
value="{{ compound.description|safe }}"
name="compound-description"
/>
</p>
</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="edit-compound-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-compound-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-compound-modal-submit').click(function(e){
$("#edit-compound-modal-form").submit(); e.preventDefault();
$('#edit-compound-modal-form').submit();
}); });
});
</script> });
</script>

100
templates/modals/objects/edit_compound_structure_modal.html
View File

@ -1,70 +1,46 @@
{% load static %} {% load static %}
<!-- Edit Compound --> <!-- Edit Compound -->
<div id="edit_compound_structure_modal" class="modal" tabindex="-1"> <div id="edit_compound_structure_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Create a Compound</h5> <h5 class="modal-title">Create a Compound</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Edit a Compound Structure.</p>
<span aria-hidden="true">&times;</span> <form id="edit-compound-structure-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="compound-structure-name">Name</label>
<p>Edit a Compound Structure.</p> <input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ compound_structure.name|safe }}">
<form </p>
id="edit-compound-structure-modal-form" <p>
accept-charset="UTF-8" <label for="compound-structure-description">Description</label>
action="" <input id="compound-structure-description" type="text" class="form-control"
data-remote="true" value="{{ compound_structure.description|safe }}" name="compound-structure-description">
method="post" </p>
> </form>
{% csrf_token %} </div>
<p> <div class="modal-footer">
<label for="compound-structure-name">Name</label> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input <button type="button" class="btn btn-primary" id="edit-compound-structure-modal-submit">Create</button>
id="compound-structure-name" </div>
class="form-control" </div>
name="compound-structure-name"
value="{{ compound_structure.name|safe }}"
/>
</p>
<p>
<label for="compound-structure-description">Description</label>
<input
id="compound-structure-description"
type="text"
class="form-control"
value="{{ compound_structure.description|safe }}"
name="compound-structure-description"
/>
</p>
</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="edit-compound-structure-modal-submit"
>
Create
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-compound-structure-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-compound-structure-modal-submit').click(function(e){
$("#edit-compound-structure-modal-form").submit(); e.preventDefault();
$('#edit-compound-structure-modal-form').submit();
}); });
});
});
</script> </script>

250
templates/modals/objects/edit_group_member_modal.html
View File

@ -1,151 +1,121 @@
{% load static %} {% load static %}
<!-- Edit Package Permission --> <!-- Edit Package Permission -->
<div id="edit_group_member_modal" class="modal" tabindex="-1"> <div id="edit_group_member_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Add or Remove Group Member</h5> <h5 class="modal-title">Add or Remove Group Member</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
To add member (either User or entire Groups) to this group select the
entity you want to add below and click the check mark.
<br />
To remove member simply click the <code>X</code> next to the member.
</p>
<div class="row">
<div class="col-xs-8">
<legend>User or Group</legend>
</div>
<div class="col-xs-4">
<legend>Add/Remove</legend>
</div>
</div>
<div class="row">
<form
id="modal-form-group-member"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-8">
<select
id="select_member"
name="member"
data-actions-box="true"
class="selPackages"
data-width="100%"
>
<option disabled selected>User</option>
{% for u in users %}
<option value="{{ u.url }}">{{ u.username }}</option>
{% endfor %}
<option disabled>Groups</option>
{% for g in groups %}
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" name="action" value="add" />
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
<p></p>
{% for u in group.user_member.all %}
<div class="row">
<form
id="modal-form-group-member_{{ u.uuid }}"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-8">
{{ u.username }}
<input type="hidden" name="member" value="{{ u.url }}" />
<input type="hidden" name="action" value="remove" />
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button> </button>
</div> </div>
</form> <div class="modal-body">
</div> <p>
{% endfor %} To add member (either User or entire Groups) to this group select the entity you want to add below
<p></p> and click the check mark.
{% for g in group.group_member.all %} <br>
<div class="row"> To remove member simply click the <code>X</code> next to the member.
<form </p>
id="modal-form-group-member_{{ g.uuid }}"
class="form-inline" <div class="row">
role="form" <div class="col-xs-8">
accept-charset="UTF-8" <legend>User or Group</legend>
action="" </div>
data-remote="true" <div class="col-xs-4">
method="post" <legend>Add/Remove</legend>
> </div>
{% csrf_token %} </div>
<div class="col-xs-8">
{{ g.name|safe }} <div class="row">
<input type="hidden" name="member" value="{{ g.url }}" /> <form id="modal-form-group-member" class="form-inline" role="form" accept-charset="UTF-8" action=""
<input type="hidden" name="action" value="remove" /> data-remote="true" method="post">
</div> {% csrf_token %}
<div class="col-xs-2"></div> <div class="col-xs-8">
<div class="col-xs-2"> <select id="select_member" name="member" data-actions-box='true'
<button type="submit" style="width:60%;" class="btn col-xs-2"> class="selPackages" data-width='100%'>
<span class="glyphicon glyphicon-trash"></span> <option disabled selected>User</option>
</button> {% for u in users %}
</div> <option value="{{ u.url }}">{{ u.username }}</option>
</form> {% endfor %}
</div> <option disabled>Groups</option>
{% endfor %} {% for g in groups %}
</div> <option value="{{ g.url }}">{{ g.name|safe }}</option>
<div class="modal-footer"> {% endfor %}
<button type="button" class="btn btn-secondary" data-dismiss="modal"> </select>
Close <input type="hidden" name="action" value="add">
</button> </div>
<button <div class="col-xs-2">
type="button" </div>
class="btn btn-primary" <div class="col-xs-2">
id="edit-package-modal-submit" <button type="submit" style="width:60%;" class="btn col-xs-2">
> <span class="glyphicon glyphicon-ok"></span>
Update </button>
</button> </div>
</div> </form>
</div>
<p></p>
{% for u in group.user_member.all %}
<div class="row">
<form id="modal-form-group-member_{{ u.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-8">
{{ u.username }}
<input type="hidden" name="member" value="{{ u.url }}"/>
<input type="hidden" name="action" value="remove">
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</div>
{% endfor %}
<p></p>
{% for g in group.group_member.all %}
<div class="row">
<form id="modal-form-group-member_{{ g.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-8">
{{ g.name|safe }}
<input type="hidden" name="member" value="{{ g.url }}"/>
<input type="hidden" name="action" value="remove">
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</div>
{% endfor %}
</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="edit-package-modal-submit">Update</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () {
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault(); $(function() {
$("#edit-package-modal-form").submit();
$('#edit-package-modal-submit').click(function(e){
e.preventDefault();
$('#edit-package-modal-form').submit();
}); });
$("#select_member").selectpicker(); $("#select_member").selectpicker();
});
})
</script> </script>

102
templates/modals/objects/edit_model_modal.html
View File

@ -1,71 +1,45 @@
{% load static %} {% load static %}
<!-- Edit Model --> <!-- Edit Model -->
<div id="edit_model_modal" class="modal" tabindex="-1"> <div id="edit_model_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" <h3 class="modal-title">Update Model</h3>
aria-label="Close" </div>
> <div class="modal-body">
<span aria-hidden="true">&times;</span> <p>Alter Name and Description of the Model.</p>
</button> <form id="edit-model-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
<h3 class="modal-title">Update Model</h3> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="model-name">Name</label>
<p>Alter Name and Description of the Model.</p> <input id="model-name" type="text" class="form-control" name="model-name"
<form value="{{ model.name|safe }}">
id="edit-model-modal-form" </p>
accept-charset="UTF-8" <p>
action="" <label for="model-description">Description</label>
data-remote="true" <input id="model-description" type="text" class="form-control" name="model-description"
method="post" value="{{ model.description|safe }}">
> </p>
{% csrf_token %} </form>
<p> </div>
<label for="model-name">Name</label> <div class="modal-footer">
<input <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="model-name" <button type="button" class="btn btn-primary" id="edit-model-modal-submit">Update</button>
type="text" </div>
class="form-control" </div>
name="model-name"
value="{{ model.name|safe }}"
/>
</p>
<p>
<label for="model-description">Description</label>
<input
id="model-description"
type="text"
class="form-control"
name="model-description"
value="{{ model.description|safe }}"
/>
</p>
</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="edit-model-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#edit-model-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-model-modal-submit').click(function (e) {
$("#edit-model-modal-form").submit(); e.preventDefault();
}); $('#edit-model-modal-form').submit();
}); });
})
</script> </script>

103
templates/modals/objects/edit_node_modal.html
View File

@ -1,70 +1,47 @@
{% load static %} {% load static %}
<!-- Edit Node --> <!-- Edit Node -->
<div id="edit_node_modal" class="modal" tabindex="-1"> <div id="edit_node_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Edit Node</h5> <h5 class="modal-title">Edit Node</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Edit Node.</p>
<span aria-hidden="true">&times;</span> <form id="edit-node-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="node-name">Name</label>
<p>Edit Node.</p> <input id="node-name" class="form-control" name="node-name" value="{{ node.name|safe}}">
<form </p>
id="edit-node-modal-form" <p>
accept-charset="UTF-8" <label for="node-description">Description</label>
action="" <input id="node-description" type="text" class="form-control"
data-remote="true" value="{{ node.description|safe }}"
method="post" name="node-description">
> </p>
{% csrf_token %} </form>
<p> </div>
<label for="node-name">Name</label> <div class="modal-footer">
<input <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="node-name" <button type="button" class="btn btn-primary" id="edit-node-modal-submit">Create</button>
class="form-control" </div>
name="node-name" </div>
value="{{ node.name|safe }}"
/>
</p>
<p>
<label for="node-description">Description</label>
<input
id="node-description"
type="text"
class="form-control"
value="{{ node.description|safe }}"
name="node-description"
/>
</p>
</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="edit-node-modal-submit"
>
Create
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-node-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-node-modal-submit').click(function(e){
$("#edit-node-modal-form").submit(); e.preventDefault();
$('#edit-node-modal-form').submit();
}); });
});
</script> });
</script>

99
templates/modals/objects/edit_package_modal.html
View File

@ -1,70 +1,45 @@
{% load static %} {% load static %}
<!-- Edit Package --> <!-- Edit Package -->
<div id="edit_package_modal" class="modal" tabindex="-1"> <div id="edit_package_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Update Package</h5> <h5 class="modal-title">Update Package</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Edit a Package.</p>
<span aria-hidden="true">&times;</span> <form id="edit-package-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="package-name">Name</label>
<p>Edit a Package.</p> <input id="package-name" class="form-control" name="package-name" value="{{ package.name|safe}}">
<form </p>
id="edit-package-modal-form" <p>
accept-charset="UTF-8" <label for="package-description">Description</label>
action="" <input id="package-description" type="text" class="form-control"
data-remote="true" value="{{ package.description|safe }}"
method="post" name="package-description">
> </p>
{% csrf_token %} </form>
<p> </div>
<label for="package-name">Name</label> <div class="modal-footer">
<input <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="package-name" <button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
class="form-control" </div>
name="package-name" </div>
value="{{ package.name|safe }}"
/>
</p>
<p>
<label for="package-description">Description</label>
<input
id="package-description"
type="text"
class="form-control"
value="{{ package.description|safe }}"
name="package-description"
/>
</p>
</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="edit-package-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-package-modal-submit').click(function(e){
$("#edit-package-modal-form").submit(); e.preventDefault();
$('#edit-package-modal-form').submit();
}); });
});
})
</script> </script>

399
templates/modals/objects/edit_package_permissions_modal.html
View File

@ -1,264 +1,183 @@
{% load static %} {% load static %}
<!-- Edit Package Permission --> <!-- Edit Package Permission -->
<div id="edit_package_permissions_modal" class="modal" tabindex="-1"> <div id="edit_package_permissions_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Grant or Revoke Permissions</h5> <h5 class="modal-title">Grant or Revoke Permissions</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
Modify permissions for this package. Note that if you give
<code>write</code> permissions to a user or group,
<code>read</code> permissions will be granted automatically.
<br />
To allow users to perform destructive actions, such as deleting the
package, <code>owner</code>
permissions must be granted.
</p>
<div class="row">
<div class="col-xs-4">
<legend>User or Group</legend>
</div>
<div class="col-xs-2">
<legend>Read</legend>
</div>
<div class="col-xs-2">
<legend>Write</legend>
</div>
<div class="col-xs-2">
<legend>Owner</legend>
</div>
</div>
<div class="row">
<form
id="modal-form-permissions"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-4">
<select
id="select_grantee"
name="grantee"
data-actions-box="true"
class="selPackages"
data-width="100%"
>
<option disabled selected>User</option>
{% for u in users %}
<option value="{{ u.url }}">{{ u.username }}</option>
{% endfor %}
<option disabled>Groups</option>
{% for g in groups %}
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<input type="checkbox" name="read" id="read_new" />
</div>
<div class="col-xs-2">
<input type="checkbox" name="write" id="write_new" />
</div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_new" />
</div>
<div class="col-xs-2">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</form>
</div>
<p></p>
{% for up in user_permissions %}
<div class="row">
<form
id="modal-form-permissions_{{ up.user.uuid }}"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-4">
{{ up.user.username }}
<input type="hidden" name="grantee" value="{{ up.user.url }}" />
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="read"
id="read_{{ up.user.uuid }}"
{% if up.has_read %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="write"
id="write_{{ up.user.uuid }}"
{% if up.has_write %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="owner"
id="owner_{{ up.user.uuid }}"
{% if up.has_all %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-ok"></span>
</button> </button>
</div> </div>
</form> <div class="modal-body">
</div> <p>
{% endfor %} Modify permissions for this package. Note that if you give <code>write</code>
<p></p> permissions to a user or group, <code>read</code> permissions will be granted automatically.
{% for gp in group_permissions %} <br>
<div class="row"> To allow users to perform destructive actions, such as deleting the package, <code>owner</code>
<form permissions must be granted.
id="modal-form-permissions_{{ gp.user.uuid }}" </p>
class="form-inline"
role="form" <div class="row">
accept-charset="UTF-8" <div class="col-xs-4">
action="" <legend>User or Group</legend>
data-remote="true" </div>
method="post" <div class="col-xs-2">
> <legend>Read</legend>
{% csrf_token %} </div>
<div class="col-xs-4"> <div class="col-xs-2">
{{ gp.group.name|safe }} <legend>Write</legend>
<input </div>
type="hidden" <div class="col-xs-2">
name="grantee" <legend>Owner</legend>
value="{{ gp.group.url }}" </div>
/> </div>
</div>
<div class="col-xs-2"> <div class="row">
<input <form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
type="checkbox" data-remote="true" method="post">
name="read" {% csrf_token %}
id="read_{{ gp.group.uuid }}" <div class="col-xs-4">
{% if gp.has_read %}checked{% endif %} <select id="select_grantee" name="grantee" data-actions-box='true'
/> class="selPackages" data-width='100%'>
</div> <option disabled selected>User</option>
<div class="col-xs-2"> {% for u in users %}
<input <option value="{{ u.url }}">{{ u.username }}</option>
type="checkbox" {% endfor %}
name="write" <option disabled>Groups</option>
id="write_{{ gp.group.uuid }}" {% for g in groups %}
{% if gp.has_write %}checked{% endif %} <option value="{{ g.url }}">{{ g.name|safe }}</option>
/> {% endfor %}
</div> </select>
<div class="col-xs-2"> </div>
<input <div class="col-xs-2">
type="checkbox" <input type="checkbox" name="read" id="read_new"/>
name="owner" </div>
id="owner_{{ gp.group.uuid }}" <div class="col-xs-2">
{% if gp.has_all %}checked{% endif %} <input type="checkbox" name="write" id="write_new"/>
/> </div>
</div> <div class="col-xs-2">
<div class="col-xs-2"> <input type="checkbox" name="owner" id="owner_new"/>
<button </div>
type="submit" <div class="col-xs-2">
style="width:60%;" <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
class="btn col-xs-2 modify-perm-button" <span class="glyphicon glyphicon-plus"></span>
> </button>
<span class="glyphicon glyphicon-ok"></span> </div>
</button> </form>
</div> </div>
</form> <p></p>
</div> {% for up in user_permissions %}
{% endfor %} <div class="row">
</div> <form id="modal-form-permissions_{{ up.user.uuid }}" class="form-inline" role="form"
<div class="modal-footer"> accept-charset="UTF-8" action="" data-remote="true" method="post">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> {% csrf_token %}
Close <div class="col-xs-4">
</button> {{ up.user.username }}
<button <input type="hidden" name="grantee" value="{{ up.user.url }}"/>
type="button" </div>
class="btn btn-primary" <div class="col-xs-2">
id="edit-package-modal-submit" <input type="checkbox" name="read" id="read_{{ up.user.uuid }}" {% if up.has_read %} checked {% endif %}/>
> </div>
Update <div class="col-xs-2">
</button> <input type="checkbox" name="write" id="write_{{ up.user.uuid }}" {% if up.has_write %} checked {% endif %}/>
</div> </div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_{{ up.user.uuid }}" {% if up.has_all %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
{% endfor %}
<p></p>
{% for gp in group_permissions %}
<div class="row">
<form id="modal-form-permissions_{{ gp.user.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-4">
{{ gp.group.name|safe }}
<input type="hidden" name="grantee" value="{{ gp.group.url }}"/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="read" id="read_{{ gp.group.uuid }}" {% if gp.has_read %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="write" id="write_{{ gp.group.uuid }}" {% if gp.has_write %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_{{ gp.group.uuid }}" {% if gp.has_all %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
{% endfor %}
</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="edit-package-modal-submit">Update</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
function checkboxClick() {
function checkboxClick() {
// id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da // id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da
parts = this.id.split("_"); parts = this.id.split('_');
perm = parts[0]; perm = parts[0];
id = parts[1]; id = parts[1];
readbox = "#read_" + id; readbox = '#read_' + id;
writebox = "#write_" + id; writebox = '#write_' + id;
ownerbox = "#owner_" + id; ownerbox = '#owner_' + id;
if (perm == "read" && !$(readbox).prop("checked")) {
$(writebox).prop("checked", false);
$(ownerbox).prop("checked", false);
}
if (perm == "write") { if (perm == 'read' && !$(readbox).prop("checked")) {
if ($(writebox).prop("checked")) { $(writebox).prop("checked", false);
$(readbox).prop("checked", true);
}
if (!$(writebox).prop("checked")) {
$(ownerbox).prop("checked", false); $(ownerbox).prop("checked", false);
}
} }
if (perm == "owner") { if (perm == 'write') {
if ($(ownerbox).prop("checked")) { if ($(writebox).prop("checked")) {
$(readbox).prop("checked", true); $(readbox).prop("checked", true);
$(writebox).prop("checked", true); }
} if (!$(writebox).prop("checked")) {
$(ownerbox).prop("checked", false);
}
} }
}
$(function () { if (perm == 'owner') {
$("#edit-package-modal-submit").click(function (e) { if ($(ownerbox).prop("checked")) {
e.preventDefault(); $(readbox).prop("checked", true);
$("#edit-package-modal-form").submit(); $(writebox).prop("checked", true);
}
}
}
$(function() {
$('#edit-package-modal-submit').click(function(e){
e.preventDefault();
$('#edit-package-modal-form').submit();
}); });
$("#select_grantee").selectpicker(); $("#select_grantee").selectpicker();
// Add click functions to permission checkboxes // Add click functions to permission checkboxes
$('[id^="read_"]').on("click", checkboxClick); $('[id^="read_"]').on('click', checkboxClick);
$('[id^="write_"]').on("click", checkboxClick); $('[id^="write_"]').on('click', checkboxClick);
$('[id^="owner_"]').on("click", checkboxClick); $('[id^="owner_"]').on('click', checkboxClick);
});
})
</script> </script>

112
templates/modals/objects/edit_password_modal.html
View File

@ -1,82 +1,46 @@
{% load static %} {% load static %}
<!-- Edit Package --> <!-- Edit Package -->
<div id="edit_password_modal" class="modal" tabindex="-1"> <div id="edit_password_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Update your Password</h5> <h5 class="modal-title">Update your Password</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>To change your password please fill out the following inputs</p>
<span aria-hidden="true">&times;</span> <form id="edit-password-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="old-password">Old Password</label>
<p>To change your password please fill out the following inputs</p> <input id="old-password" class="form-control" name="old-password" type="password" autocomplete="current-password">
<form </p>
id="edit-password-modal-form" <p>
accept-charset="UTF-8" <label for="new-password">New Password</label>
action="" <input id="new-password" class="form-control" name="new-password" type="password", autocomplete="new-password">
data-remote="true" </p>
method="post" <p>
> <label for="new-password-repeat">Repeat New Password</label>
{% csrf_token %} <input id="new-password-repeat" class="form-control" name="new-password-repeat" type="password" autocomplete="new-password">
<p> </p>
<label for="old-password">Old Password</label> </form>
<input </div>
id="old-password" <div class="modal-footer">
class="form-control" <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
name="old-password" <button type="button" class="btn btn-primary" id="edit-password-modal-submit">Update</button>
type="password" </div>
autocomplete="current-password" </div>
/>
</p>
<p>
<label for="new-password">New Password</label>
<input
id="new-password"
class="form-control"
name="new-password"
type="password"
,
autocomplete="new-password"
/>
</p>
<p>
<label for="new-password-repeat">Repeat New Password</label>
<input
id="new-password-repeat"
class="form-control"
name="new-password-repeat"
type="password"
autocomplete="new-password"
/>
</p>
</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="edit-password-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-password-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-password-modal-submit').click(function(e){
$("#edit-password-modal-form").submit(); e.preventDefault();
$('#edit-password-modal-form').submit();
}); });
});
})
</script> </script>

100
templates/modals/objects/edit_pathway_modal.html
View File

@ -1,72 +1,44 @@
{% load static %} {% load static %}
<!-- Edit Pathway --> <!-- Edit Pathway -->
<div id="edit_pathway_modal" class="modal" tabindex="-1"> <div id="edit_pathway_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Edit Pathway</h5> <h5 class="modal-title">Edit Pathway</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Edit Pathway.</p>
<span aria-hidden="true">&times;</span> <form id="edit-pathway-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="pathway-name">Name</label>
<p>Edit Pathway.</p> <input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name|safe }}">
<form </p>
id="edit-pathway-modal-form" <p>
accept-charset="UTF-8" <label for="pathway-description">Description</label>
action="" <textarea id="pathway-description" type="text" class="form-control" name="pathway-description"
data-remote="true" rows="10">{{ pathway.description|safe }}</textarea>
method="post" </p>
> </form>
{% csrf_token %} </div>
<p> <div class="modal-footer">
<label for="pathway-name">Name</label> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input <button type="button" class="btn btn-primary" id="edit-pathway-modal-submit">Update</button>
id="pathway-name" </div>
class="form-control" </div>
name="pathway-name"
value="{{ pathway.name|safe }}"
/>
</p>
<p>
<label for="pathway-description">Description</label>
<textarea
id="pathway-description"
type="text"
class="form-control"
name="pathway-description"
rows="10"
>
{{ pathway.description|safe }}</textarea
>
</p>
</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="edit-pathway-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-pathway-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-pathway-modal-submit').click(function(e){
$("#edit-pathway-modal-form").submit(); e.preventDefault();
$('#edit-pathway-modal-form').submit();
}); });
});
})
</script> </script>

253
templates/modals/objects/edit_prediction_setting_modal.html
View File

@ -1,163 +1,106 @@
{% load static %} {% load static %}
<!-- Edit Package --> <!-- Edit Package -->
<div id="update_prediction_settings_modal" class="modal" tabindex="-1"> <div id="update_prediction_settings_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Update Prediction Setting</h5> <h5 class="modal-title">Update Prediction Setting</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
To update your prediction setting modify parameters in the form below
und click "Update"
</p>
<form
id="edit-prediction-setting-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div id="prediction-setting" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<table class="table-bordered table-hover table">
<tr style="background-color: rgba(0, 0, 0, 0.08);">
<th scope="col" width="20%">Parameter</th>
<th scope="col" width="80%">Value</th>
</tr>
<tbody>
{% if 'model' in user.prediction_settings %}
<tr>
<td width="20%">Model</td>
<td width="80%">
<table
width="100%"
class="table-bordered table-hover table"
>
<tbody>
<tr>
<td colspan="2">
<select
id="model"
name="model"
class="form-control"
data-width="100%"
>
{% for m in models %}
<option
value="{{ m.id }}"
{% if user.prediction_settings.model.url == m.url %}selected{% endif %}
>
{{ m.name|safe }}
</option>
{% endfor %}
</select>
</td>
</tr>
{% for k, v in user.prediction_settings.model_parameters.items %}
<tr>
<th width="20%">Model Parameter</th>
<th width="80%">Parameter Value</th>
</tr>
<tr>
<td width="20%">
{% if k == 'threshold' %}
Threshold
{% endif %}
</td>
<td width="80%">
{% if k == 'threshold' %}
<input
type="number"
class="form-control"
name="{{ k }}"
value="{{ v }}"
min="0"
max="1"
step="0.05"
/>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
{% endif %}
{% for k, v in user.prediction_settings.truncator.items %}
<tr>
<td>
<p>
{% if k == 'max_nodes' %}
Max Nodes
{% elif k == 'max_depth' %}
Max Depth
{% endif %}
</p>
</td>
<td>
<p>
{% if k == 'max_nodes' %}
<input
type="number"
class="form-control"
name="{{ k }}"
value="{{ v }}"
min="1"
max="50"
step="1"
/>
{% elif k == 'max_depth' %}
<input
type="number"
class="form-control"
name="{{ k }}"
value="{{ v }}"
min="1"
max="8"
step="1"
/>
{% endif %}
</p>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
</div> <div class="modal-body">
</form> <p>To update your prediction setting modify parameters in the form below und click "Update"</p>
</div> <form id="edit-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
<div class="modal-footer"> {% csrf_token %}
<button type="button" class="btn btn-secondary" data-dismiss="modal"> <div id="prediction-setting" class="panel-collapse collapse in">
Close <div class="panel-body list-group-item">
</button>
<button <table class="table table-bordered table-hover">
type="button" <tr style="background-color: rgba(0, 0, 0, 0.08);">
class="btn btn-primary" <th scope="col" width="20%">Parameter</th>
id="edit-prediction-setting-modal-submit" <th scope="col" width="80%">Value</th>
> </tr>
Update <tbody>
</button> {% if 'model' in user.prediction_settings %}
</div> <tr>
<td width="20%">Model</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<tbody>
<tr>
<td colspan="2">
<select id="model" name="model" class="form-control" data-width='100%'>
{% for m in models %}
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name|safe }}</option>
{% endfor %}
</select>
</td>
</tr>
{% for k, v in user.prediction_settings.model_parameters.items %}
<tr>
<th width="20%">Model Parameter</th>
<th width="80%">Parameter Value</th>
</tr>
<tr>
<td width="20%">
{% if k == 'threshold' %}
Threshold
{% endif %}
</td>
<td width="80%">
{% if k == 'threshold' %}
<input type="number" class="form-control" name="{{k}}" value="{{v}}"
min="0" max="1" step="0.05">
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
{% endif %}
{% for k, v in user.prediction_settings.truncator.items %}
<tr>
<td><p>
{% if k == 'max_nodes' %}
Max Nodes
{% elif k == 'max_depth' %}
Max Depth
{% endif %}
</p></td>
<td><p>
{% if k == 'max_nodes' %}
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
max="50" step="1">
{% elif k == 'max_depth' %}
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
max="8" step="1">
{% endif %}
</p></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</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="edit-prediction-setting-modal-submit">Update</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-prediction-setting-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-prediction-setting-modal-submit').click(function(e){
$("#edit-prediction-setting-modal-form").submit(); e.preventDefault();
}); $('#edit-prediction-setting-modal-form').submit();
}); });
})
</script> </script>

98
templates/modals/objects/edit_reaction_modal.html
View File

@ -1,69 +1,45 @@
{% load static %} {% load static %}
<!-- Edit Reaction --> <!-- Edit Reaction -->
<div id="edit_reaction_modal" class="modal" tabindex="-1"> <div id="edit_reaction_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" <h3 class="modal-title">Update Reaction</h3>
aria-label="Close" </div>
> <div class="modal-body">
<span aria-hidden="true">&times;</span> <form id="edit-reaction-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
<h3 class="modal-title">Update Reaction</h3> <p>
</div> <label for="reaction-name">Name</label>
<div class="modal-body"> <input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name|safe }}">
<form </p>
id="edit-reaction-modal-form" <p>
accept-charset="UTF-8" <label for="reaction-description">Description</label>
action="" <input id="reaction-description" type="text" class="form-control"
data-remote="true" value="{{ reaction.description|safe }}" name="reaction-description">
method="post" </p>
> </form>
{% csrf_token %} </div>
<p> <div class="modal-footer">
<label for="reaction-name">Name</label> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input <button type="button" class="btn btn-primary" id="edit-reaction-modal-submit">Update</button>
id="reaction-name" </div>
class="form-control" </div>
name="reaction-name"
value="{{ reaction.name|safe }}"
/>
</p>
<p>
<label for="reaction-description">Description</label>
<input
id="reaction-description"
type="text"
class="form-control"
value="{{ reaction.description|safe }}"
name="reaction-description"
/>
</p>
</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="edit-reaction-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-reaction-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-reaction-modal-submit').click(function(e){
$("#edit-reaction-modal-form").submit(); e.preventDefault();
$('#edit-reaction-modal-form').submit();
}); });
});
});
</script> </script>

98
templates/modals/objects/edit_rule_modal.html
View File

@ -1,69 +1,45 @@
{% load static %} {% load static %}
<!-- Edit Rule --> <!-- Edit Rule -->
<div id="edit_rule_modal" class="modal" tabindex="-1"> <div id="edit_rule_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" <h3 class="modal-title">Update Rule</h3>
aria-label="Close" </div>
> <div class="modal-body">
<span aria-hidden="true">&times;</span> <form id="edit-rule-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
<h3 class="modal-title">Update Rule</h3> <p>
</div> <label for="rule-name">Name</label>
<div class="modal-body"> <input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name|safe }}">
<form </p>
id="edit-rule-modal-form" <p>
accept-charset="UTF-8" <label for="rule-description">Description</label>
action="" <input id="rule-description" type="text" class="form-control"
data-remote="true" value="{{ rule.description|safe }}" name="rule-description">
method="post" </p>
> </form>
{% csrf_token %} </div>
<p> <div class="modal-footer">
<label for="rule-name">Name</label> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input <button type="button" class="btn btn-primary" id="edit-rule-modal-submit">Update</button>
id="rule-name" </div>
class="form-control" </div>
name="rule-name"
value="{{ rule.name|safe }}"
/>
</p>
<p>
<label for="rule-description">Description</label>
<input
id="rule-description"
type="text"
class="form-control"
value="{{ rule.description|safe }}"
name="rule-description"
/>
</p>
</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="edit-rule-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-rule-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-rule-modal-submit').click(function(e){
$("#edit-rule-modal-form").submit(); e.preventDefault();
$('#edit-rule-modal-form').submit();
}); });
});
});
</script> </script>

156
templates/modals/objects/edit_user_modal.html
View File

@ -1,110 +1,62 @@
{% load static %} {% load static %}
<!-- Edit User --> <!-- Edit User -->
<div id="edit_user_modal" class="modal" tabindex="-1"> <div id="edit_user_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Update User Defaults</h5> <h5 class="modal-title">Update User Defaults</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Edit User Defaults.</p>
<span aria-hidden="true">&times;</span> <form id="edit-user-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <p>
<div class="modal-body"> <label for="default-package">Default Package</label>
<p>Edit User Defaults.</p> <select id="default-package" name="default-package" class="form-control" data-width='100%'>
<form <option disabled>Select a Package</option>
id="edit-user-modal-form" {% for p in meta.writeable_packages %}
accept-charset="UTF-8" <option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name|safe }}</option>
action="" {% endfor %}
data-remote="true" </select>
method="post" </p>
> <p>
{% csrf_token %} <label for="default-group">Default Group</label>
<p> <select id="default-group" name="default-group" class="form-control" data-width='100%'>
<label for="default-package">Default Package</label> <option disabled>Select a Group</option>
<select {% for g in meta.available_groups %}
id="default-package" <option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name|safe }}</option>
name="default-package" {% endfor %}
class="form-control" </select>
data-width="100%" </p>
> <p>
<option disabled>Select a Package</option> <label for="default-prediction-setting">Default Prediction Setting</label>
{% for p in meta.writeable_packages %} <select id="default-prediction-setting" name="default-prediction-setting" class="form-control" data-width='100%'>
<option <option disabled>Select a Setting</option>
value="{{ p.url }}" {% for s in meta.available_settings %}
{% if p.id == meta.user.default_package.id %}selected{% endif %} <option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name|safe }}</option>
> {% endfor %}
{{ p.name|safe }} </select>
</option> </p>
{% endfor %} </form>
</select> </div>
</p> <div class="modal-footer">
<p> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<label for="default-group">Default Group</label> <button type="button" class="btn btn-primary" id="edit-user-modal-submit">Update</button>
<select </div>
id="default-group" </div>
name="default-group"
class="form-control"
data-width="100%"
>
<option disabled>Select a Group</option>
{% for g in meta.available_groups %}
<option
value="{{ g.url }}"
{% if g.id == meta.user.default_group.id %}selected{% endif %}
>
{{ g.name|safe }}
</option>
{% endfor %}
</select>
</p>
<p>
<label for="default-prediction-setting"
>Default Prediction Setting</label
>
<select
id="default-prediction-setting"
name="default-prediction-setting"
class="form-control"
data-width="100%"
>
<option disabled>Select a Setting</option>
{% for s in meta.available_settings %}
<option
value="{{ s.url }}"
{% if s.id == meta.user.default_setting.id %}selected{% endif %}
>
{{ s.name|safe }}
</option>
{% endfor %}
</select>
</p>
</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="edit-user-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-user-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-user-modal-submit').click(function(e){
$("#edit-user-modal-form").submit(); e.preventDefault();
$('#edit-user-modal-form').submit();
}); });
});
})
</script> </script>

146
templates/modals/objects/evaluate_model_modal.html
View File

@ -1,93 +1,73 @@
<div
class="modal fade"
tabindex="-1"
id="evaluate_model_modal"
role="dialog"
aria-labelledby="evaluate_model_modal"
aria-hidden="true"
>
<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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Evaluate Model</h4>
</div>
<div class="modal-body">
<form
id="evaluate_model_form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="jumbotron">
For evaluation, you need to select the packages you want to use.
While the model is evaluating, you can use the model for
predictions.
</div>
<!-- Evaluation Packages -->
<label for="model-evaluation-packages">Evaluation Packages</label>
<select
id="model-evaluation-packages"
name="model-evaluation-packages"
data-actions-box="true"
class="form-control"
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> <div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
{% for obj in meta.readable_packages %} aria-hidden="true">
{% if not obj.reviewed %} <div class="modal-dialog modal-lg">
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <div class="modal-content">
{% endif %} <div class="modal-header">
{% endfor %} <button type="button" class="close" data-dismiss="modal">
</select> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Evaluate Model</h4>
</div>
<div class="modal-body">
<form id="evaluate_model_form" accept-charset="UTF-8" action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<div class="jumbotron">
For evaluation, you need to select the packages you want to use.
While the model is evaluating, you can use the model for predictions.
</div>
<!-- Evaluation Packages -->
<label for="model-evaluation-packages">Evaluation Packages</label>
<select id="model-evaluation-packages" name="model-evaluation-packages" data-actions-box='true'
class="form-control" 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 %}
<!-- Eval Type --> <option disabled>Unreviewed Packages</option>
<label for="model-evaluation-type">Evaluation Type</label> {% for obj in meta.readable_packages %}
<select {% if not obj.reviewed %}
id="model-evaluation-type" <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
name="model-evaluation-type" {% endif %}
class="form-control" {% endfor %}
> </select>
<option disabled selected>Select evaluation type</option>
<option value="sg">Single Generation</option>
<option value="mg">Multiple Generations</option>
</select>
<input type="hidden" name="hidden" value="evaluate" /> <!-- Eval Type -->
</form> <label for="model-evaluation-type">Evaluation Type</label>
</div> <select id="model-evaluation-type" name="model-evaluation-type" class="form-control">
<div class="modal-footer"> <option disabled selected>Select evaluation type</option>
<a id="evaluate_model_form_submit" class="btn btn-primary" href="#" <option value="sg">Single Generation</option>
>Evaluate</a <option value="mg">Multiple Generations</option>
> </select>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel <input type="hidden" name="hidden" value="evaluate">
</button> </form>
</div> </div>
<div class="modal-footer">
<a id="evaluate_model_form_submit" class="btn btn-primary" href="#">Evaluate</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () {
$("#model-evaluation-packages").selectpicker();
$("#evaluate_model_form_submit").on("click", function (e) { $(function () {
e.preventDefault();
$("#evaluate_model_form").submit(); $("#model-evaluation-packages").selectpicker();
$('#evaluate_model_form_submit').on('click', function (e) {
e.preventDefault();
$('#evaluate_model_form').submit();
});
}); });
});
</script> </script>

75
templates/modals/objects/export_package_modal.html
View File

@ -1,53 +1,36 @@
{% load static %} {% load static %}
<!-- Export Package --> <!-- Export Package -->
<div id="export_package_modal" class="modal" tabindex="-1"> <div id="export_package_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Export Package as JSON</h3> <h3 class="modal-title">Export Package as JSON</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> By clicking on Export the Package will be serialized into a JSON and directly downloaded.
<span aria-hidden="true">&times;</span> <form id="export-package-modal-form" accept-charset="UTF-8" action="{{ package.url }}"
</button> data-remote="true" method="GET">
</div> <input type="hidden" name="export" value="true"/>
<div class="modal-body"> </form>
By clicking on Export the Package will be serialized into a JSON and </div>
directly downloaded. <div class="modal-footer">
<form <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="export-package-modal-form" <button type="button" class="btn btn-primary" id="export-package-modal-form-submit">Export</button>
accept-charset="UTF-8" </div>
action="{{ package.url }}" </div>
data-remote="true"
method="GET"
>
<input type="hidden" name="export" value="true" />
</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="export-package-modal-form-submit"
>
Export
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#export-package-modal-form-submit").click(function (e) {
e.preventDefault(); $('#export-package-modal-form-submit').click(function (e) {
$("#export-package-modal-form").submit(); e.preventDefault();
$("#export_package_modal").modal("hide"); $('#export-package-modal-form').submit();
}); $('#export_package_modal').modal('hide');
}); });
})
</script> </script>

164
templates/modals/objects/generic_copy_object_modal.html
View File

@ -1,109 +1,75 @@
{% load static %} {% load static %}
<!-- Copy Object --> <!-- Copy Object -->
<div id="generic_copy_object_modal" class="modal" tabindex="-1"> <div id="generic_copy_object_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Copy {{ object_type|capfirst }}</h3> <h3 class="modal-title">Copy {{ object_type|capfirst }}</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <form id="generic-copy-object-modal-form" accept-charset="UTF-8" data-remote="true" method="post">
<span aria-hidden="true">&times;</span> {% csrf_token %}
</button> <label for="target-package">Select the Target Package you want to copy this {{ object_type }}
</div> into</label>
<div class="modal-body"> <select id="target-package" name="target-package" data-actions-box='true' class="form-control"
<form data-width='100%'>
id="generic-copy-object-modal-form" <option disabled selected>Select Target Package</option>
accept-charset="UTF-8" {% for p in meta.writeable_packages %}
data-remote="true" <option value="{{ p.url }}">{{ p.name|safe }}</option>`
method="post" {% endfor %}
> </select>
{% csrf_token %} <input type="hidden" name="hidden" value="copy">
<label for="target-package" </form>
>Select the Target Package you want to copy this {{ object_type }} <div id="copy-object-error-message" class="alert alert-danger" role="alert" style="display: none">
into</label </div>
> </div>
<select <div class="modal-footer">
id="target-package" <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
name="target-package" <button type="button" class="btn btn-primary" id="generic-copy-object-modal-form-submit">
data-actions-box="true" Copy
class="form-control" </button>
data-width="100%" </div>
> </div>
<option disabled selected>Select Target Package</option>
{% for p in meta.writeable_packages %}
<option value="{{ p.url }}">{{ p.name|safe }}</option>
`
{% endfor %}
</select>
<input type="hidden" name="hidden" value="copy" />
</form>
<div
id="copy-object-error-message"
class="alert alert-danger"
role="alert"
style="display: none"
></div>
</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="generic-copy-object-modal-form-submit"
>
Copy
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#generic-copy-object-modal-form-submit").click(function (e) {
e.preventDefault();
$("#copy-object-error-message").hide();
const packageUrl = $("#target-package").find(":selected").val(); $('#generic-copy-object-modal-form-submit').click(function (e) {
e.preventDefault();
$('#copy-object-error-message').hide()
if ( const packageUrl = $('#target-package').find(":selected").val();
packageUrl === "Select Target Package" ||
packageUrl === "" ||
packageUrl === null ||
packageUrl === undefined
) {
return;
}
const formData = {
hidden: "copy",
object_to_copy: "{{ current_object.url }}",
};
$.ajax({ if (packageUrl === 'Select Target Package' || packageUrl === '' || packageUrl === null || packageUrl === undefined) {
type: "post", return;
data: formData, }
url: packageUrl, const formData = {
success: function (data, textStatus) { hidden: 'copy',
window.location.href = data.success; object_to_copy: '{{ current_object.url }}',
}, }
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.responseJSON.error.indexOf("to the same package") > -1) { $.ajax({
$("#copy-object-error-message").append( type: 'post',
"<p>The target Package is the same as the source Package. Please select another target!</p>", data: formData,
); url: packageUrl,
} else { success: function (data, textStatus) {
$("#copy-object-error-message").append( window.location.href = data.success;
"<p>" + jqXHR.responseJSON.error + "</p>", },
); error: function (jqXHR, textStatus, errorThrown) {
} if (jqXHR.responseJSON.error.indexOf('to the same package') > -1) {
$("#copy-object-error-message").show(); $('#copy-object-error-message').append('<p>The target Package is the same as the source Package. Please select another target!</p>');
}, } else {
}); $('#copy-object-error-message').append('<p>' + jqXHR.responseJSON.error + '</p>');
}); }
}); $('#copy-object-error-message').show();
}
});
});
})
</script> </script>

86
templates/modals/objects/generic_delete_modal.html
View File

@ -1,58 +1,42 @@
{% load static %} {% load static %}
<!-- Delete Object --> <!-- Delete Object -->
<div id="generic_delete_modal" class="modal" tabindex="-1"> <div id="generic_delete_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Delete {{ object_type|capfirst }}</h3> <h3 class="modal-title">Delete {{ object_type|capfirst }}</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> {% if object_type == 'user' %}
<span aria-hidden="true">&times;</span> Clicking "Delete" will <strong>permanently</strong> delete the User and associated data.
</button> This action can't be undone!
</div> {% else %}
<div class="modal-body"> Deletes the {{ object_type|capfirst }}. Related objects that depend on this {{ object_type|capfirst }}
{% if object_type == 'user' %} will be deleted as well.
Clicking "Delete" will <strong>permanently</strong> delete the User {% endif %}
and associated data. This action can't be undone! <form id="generic-delete-modal-form" accept-charset="UTF-8" action="{{ current_object.url }}"
{% else %} data-remote="true" method="post">
Deletes the {{ object_type|capfirst }}. Related objects that depend on {% csrf_token %}
this {{ object_type|capfirst }} will be deleted as well. <input type="hidden" id="hidden" name="hidden" value="delete"/>
{% endif %} </form>
<form </div>
id="generic-delete-modal-form" <div class="modal-footer">
accept-charset="UTF-8" <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
action="{{ current_object.url }}" <button type="button" class="btn btn-primary" id="generic-delete-modal-form-submit">Delete</button>
data-remote="true" </div>
method="post" </div>
>
{% csrf_token %}
<input type="hidden" id="hidden" name="hidden" value="delete" />
</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="generic-delete-modal-form-submit"
>
Delete
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#generic-delete-modal-form-submit").click(function (e) {
e.preventDefault(); $('#generic-delete-modal-form-submit').click(function (e) {
$("#generic-delete-modal-form").submit(); e.preventDefault();
}); $('#generic-delete-modal-form').submit();
}); });
})
</script> </script>

369
templates/modals/objects/generic_set_aliases_modal.html
View File

@ -1,213 +1,170 @@
{% load static %} {% load static %}
<style> <style>
.alias-container { .alias-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
padding: 4px 6px; padding: 4px 6px;
cursor: text; cursor: text;
min-height: 38px; min-height: 38px;
background-color: #fff; background-color: #fff;
}
.alias {
display: inline-flex;
align-items: center;
background-color: #5bc0de;
color: white;
padding: 4px 8px;
margin: 3px 3px;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
}
.alias .remove {
margin-left: 6px;
cursor: pointer;
font-weight: bold;
line-height: 1;
}
.alias-input {
flex: 1;
min-width: 120px;
border: none;
outline: none;
margin: 3px 3px;
font-size: 14px;
}
.form-control.alias-container {
height: auto;
box-shadow: none;
}
</style>
<div
class="modal fade bs-modal-lg"
id="set_aliases_modal"
tabindex="-1"
aria-labelledby="set_aliases_modal"
aria-modal="true"
role="dialog"
>
<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">
Set Aliases for {{ current_object.name|safe }}
</h4>
</div>
<div class="modal-body">
<form
id="set_aliases_modal_form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="alias-input">Aliases:</label>
<div class="form-control alias-container" id="alias-box">
{% for alias in current_object.aliases %}
<span class="alias"
>{{ alias|escape }}<span class="remove">&times;</span></span
>
{% endfor %}
<input
type="text"
id="alias-input"
class="alias-input"
placeholder="Add Alias..."
/>
</div>
</form>
<div
id="add-alias-error-message"
class="alert alert-danger"
role="alert"
style="display: none"
></div>
</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="set_aliases_modal_form_submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
function addAlias(aliasText) {
aliasText = aliasText.trim();
if (aliasText === "") return;
// Avoid duplicate aliass
var exists = false;
$("#alias-box .alias").each(function () {
if (
$(this).text().replace("×", "").trim().toLowerCase() ===
aliasText.toLowerCase()
) {
exists = true;
return false;
}
});
if (!exists) {
var aliasHtml =
'<span class="alias">' +
$("<div>").text(aliasText).html() +
'<span class="remove">&times;</span></span>';
$(aliasHtml).insertBefore("#alias-input");
}
$("#alias-input").val("");
} }
// Add alias when Enter is pressed .alias {
$("#alias-input").on("keypress", function (e) { display: inline-flex;
if (e.which === 13) { align-items: center;
e.preventDefault(); background-color: #5bc0de;
addAlias($(this).val()); color: white;
} padding: 4px 8px;
margin: 3px 3px;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
}
.alias .remove {
margin-left: 6px;
cursor: pointer;
font-weight: bold;
line-height: 1;
}
.alias-input {
flex: 1;
min-width: 120px;
border: none;
outline: none;
margin: 3px 3px;
font-size: 14px;
}
.form-control.alias-container {
height: auto;
box-shadow: none;
}
</style>
<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal"
aria-modal="true" role="dialog">
<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">Set Aliases for {{ current_object.name|safe }}</h4>
</div>
<div class="modal-body">
<form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<label for="alias-input">Aliases:</label>
<div class="form-control alias-container" id="alias-box">
{% for alias in current_object.aliases %}
<span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span>
{% endfor %}
<input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
</div>
</form>
<div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none">
</div>
</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="set_aliases_modal_form_submit">Submit</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
function addAlias(aliasText) {
aliasText = aliasText.trim();
if (aliasText === '') return;
// Avoid duplicate aliass
var exists = false;
$('#alias-box .alias').each(function () {
if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
exists = true;
return false;
}
});
if (!exists) {
var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
'<span class="remove">&times;</span></span>';
$(aliasHtml).insertBefore('#alias-input');
}
$('#alias-input').val('');
}
// Add alias when Enter is pressed
$('#alias-input').on('keypress', function (e) {
if (e.which === 13) {
e.preventDefault();
addAlias($(this).val());
}
});
// Add alias when input loses focus
$('#alias-input').on('blur', function () {
var val = $(this).val();
if (val.trim() !== '') {
addAlias(val);
}
});
// Remove alias when clicking ×
$('#alias-box').on('click', '.remove', function () {
$(this).closest('.alias').remove();
});
// Focus input when clicking the container
$('#alias-box').on('click', function () {
$('#alias-input').focus();
});
$('#set_aliases_modal_form_submit').on('click', function (e) {
e.preventDefault();
let aliases = [];
$('#alias-box .alias').each(function () {
aliases.push($(this).text().replace('×', '').trim())
});
if (aliases.length === 0) {
// Set empty string for deletion of all aliases
// If empty list is sent, its gets removed entirely from post data
aliases = ['']
}
formData = {
'aliases': aliases
}
$.ajax({
type: 'post',
data: formData,
url: '{{ current_object.url }}',
traditional: true,
success: function (data, textStatus) {
window.location.href = data.success;
},
error: function (jqXHR, textStatus, errorThrown) {
$('#add-alias-error-message').append('<p>Setting aliases failed!</p>');
$('#add-alias-error-message').show(); }
});
});
}); });
// Add alias when input loses focus
$("#alias-input").on("blur", function () {
var val = $(this).val();
if (val.trim() !== "") {
addAlias(val);
}
});
// Remove alias when clicking ×
$("#alias-box").on("click", ".remove", function () {
$(this).closest(".alias").remove();
});
// Focus input when clicking the container
$("#alias-box").on("click", function () {
$("#alias-input").focus();
});
$("#set_aliases_modal_form_submit").on("click", function (e) {
e.preventDefault();
let aliases = [];
$("#alias-box .alias").each(function () {
aliases.push($(this).text().replace("×", "").trim());
});
if (aliases.length === 0) {
// Set empty string for deletion of all aliases
// If empty list is sent, its gets removed entirely from post data
aliases = [""];
}
formData = {
aliases: aliases,
};
$.ajax({
type: "post",
data: formData,
url: "{{ current_object.url }}",
traditional: true,
success: function (data, textStatus) {
window.location.href = data.success;
},
error: function (jqXHR, textStatus, errorThrown) {
$("#add-alias-error-message").append(
"<p>Setting aliases failed!</p>",
);
$("#add-alias-error-message").show();
},
});
});
});
</script> </script>

142
templates/modals/objects/generic_set_external_reference_modal.html
View File

@ -1,97 +1,61 @@
{% load static %} {% load static %}
<!-- Delete Object --> <!-- Delete Object -->
<div id="generic_set_external_reference_modal" class="modal" tabindex="-1"> <div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Add External References</h3> <h3 class="modal-title">Add External References</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <form id="generic-set-external-reference-modal-form" accept-charset="UTF-8"
<span aria-hidden="true">&times;</span> action="{{ current_object.url }}"
</button> data-remote="true" method="post">
</div> {% csrf_token %}
<div class="modal-body"> <label for="database-select">Select the Database you want to attach an External Reference
<form for</label>
id="generic-set-external-reference-modal-form" <select id="database-select" name="selected-database" data-actions-box='true' class="form-control"
accept-charset="UTF-8" data-width='100%'>
action="{{ current_object.url }}" <option disabled selected>Select Database</option>
data-remote="true" {% for entity, databases in meta.external_databases.items %}
method="post" {% if entity == object_type %}
> {% for db in databases %}
{% csrf_token %} <option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}"
<label for="database-select" value="{{ db.database.id }}">{{ db.database.name|safe }}</option>`
>Select the Database you want to attach an External Reference {% endfor %}
for</label {% endif %}
> {% endfor %}
<select </select>
id="database-select" <p></p>
name="selected-database" <div id="input-div" style="display: none">
data-actions-box="true" <label for="identifier" >The reference</label>
class="form-control" <input type="text" id="identifier" name="identifier" class="form-control" placeholder="">
data-width="100%" </div>
> </form>
<option disabled selected>Select Database</option> </div>
{% for entity, databases in meta.external_databases.items %} <div class="modal-footer">
{% if entity == object_type %} <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{% for db in databases %} <button type="button" class="btn btn-primary" id="generic-set-external-reference-modal-form-submit">Submit</button>
<option </div>
id="db-select-{{ db.database.pk }}" </div>
data-input-placeholder="{{ db.placeholder }}"
value="{{ db.database.id }}"
>
{{ db.database.name|safe }}
</option>
`
{% endfor %}
{% endif %}
{% endfor %}
</select>
<p></p>
<div id="input-div" style="display: none">
<label for="identifier">The reference</label>
<input
type="text"
id="identifier"
name="identifier"
class="form-control"
placeholder=""
/>
</div>
</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="generic-set-external-reference-modal-form-submit"
>
Submit
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#database-select").on("change", function () {
let selected = $(this).val();
$("#identifier").attr(
"placeholder",
$("#db-select-" + selected).data("input-placeholder"),
);
$("#input-div").show();
});
$("#generic-set-external-reference-modal-form-submit").click(function (e) { $("#database-select").on("change", function () {
e.preventDefault(); let selected = $(this).val();
$("#generic-set-external-reference-modal-form").submit(); $("#identifier").attr("placeholder", $('#db-select-' + selected).data('input-placeholder'));
}); $("#input-div").show();
}); });
$('#generic-set-external-reference-modal-form-submit').click(function (e) {
e.preventDefault();
$('#generic-set-external-reference-modal-form').submit();
});
})
</script> </script>

97
templates/modals/objects/generic_set_scenario_modal.html
View File

@ -1,71 +1,37 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="set_scenario_modal" tabindex="-1" aria-labelledby="set_scenario_modal"
class="modal fade bs-modal-lg" aria-modal="true" role="dialog">
id="set_scenario_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="set_scenario_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">×</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Set Scenarios for {{ current_object.name|safe }}</h4>
<div class="modal-content"> </div>
<div class="modal-header"> <div class="modal-body">
<button <div id="loading_scenario_div" class="text-center"></div>
type="button" <form id="set_scenario_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
class="close" data-remote="true" method="post">
data-dismiss="modal" {% csrf_token %}
aria-label="Close" <label for="scenario-select">Scenarios</label>
> <select id="scenario-select" name="selected-scenarios" data-actions-box='true' class="form-control"
<span aria-hidden="true">×</span> multiple data-width='100%'>
</button> <option disabled>Select Scenarios</option>
<h4 class="modal-title"> <option value="" hidden></option>
Set Scenarios for {{ current_object.name|safe }} </select>
</h4> </form>
</div> </div>
<div class="modal-body"> <div class="modal-footer">
<div id="loading_scenario_div" class="text-center"></div> <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
<form </button>
id="set_scenario_modal_form" <button type="button" class="btn btn-primary" id="set_scenario_modal_form_submit">Submit</button>
accept-charset="UTF-8" </div>
action="{{ current_object.url }}" </div>
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="scenario-select">Scenarios</label>
<select
id="scenario-select"
name="selected-scenarios"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option disabled>Select Scenarios</option>
<option value="" hidden></option>
</select>
</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="set_scenario_modal_form_submit"
>
Submit
</button>
</div>
</div> </div>
</div>
</div> </div>
{# prettier-ignore-start #}
<script> <script>
$(function () { $(function () {
@ -109,4 +75,3 @@
}); });
</script> </script>
{# prettier-ignore-end #}

113
templates/modals/objects/identify_missing_rules_modal.html
View File

@ -1,75 +1,54 @@
{% load static %} {% load static %}
<!-- Identify Missing Rules --> <!-- Identify Missing Rules -->
<div id="identify_missing_rules_modal" class="modal" tabindex="-1"> <div id="identify_missing_rules_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Identify Missing Rules</h3> <h3 class="modal-title">Identify Missing Rules</h3>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> By clicking on Download we'll search the Pathway for Reactions that are not backed by
<span aria-hidden="true">&times;</span> a Rule or which can be assembled by chaining two rules.
</button> <form id="identify-missing-rules-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
</div> data-remote="true" method="GET">
<div class="modal-body"> <label for="rule-package">Select the Rule Package</label>
By clicking on Download we'll search the Pathway for Reactions that are <select id="rule-package" name="rule-package" data-actions-box='true' class="form-control"
not backed by a Rule or which can be assembled by chaining two rules. data-width='100%'>
<form <option disabled>Reviewed Packages</option>
id="identify-missing-rules-modal-form" {% for obj in meta.readable_packages %}
accept-charset="UTF-8" {% if obj.reviewed %}
action="{{ pathway.url }}" <option value="{{ obj.url }}">{{ obj.name }}</option>
data-remote="true" {% endif %}
method="GET" {% endfor %}
>
<label for="rule-package">Select the Rule Package</label>
<select
id="rule-package"
name="rule-package"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<option disabled>Reviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option> <option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %} {% for obj in meta.readable_packages %}
{% if not obj.reviewed %} {% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name }}</option> <option value="{{ obj.url }}">{{ obj.name }}</option>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</select> </select>
<input type="hidden" name="identify-missing-rules" value="true" /> <input type="hidden" name="identify-missing-rules" value="true"/>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Close <button type="button" class="btn btn-primary" id="identify-missing-rules-modal-submit">Download</button>
</button> </div>
<button </div>
type="button"
class="btn btn-primary"
id="identify-missing-rules-modal-submit"
>
Download
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#identify-missing-rules-modal-submit").click(function (e) {
e.preventDefault(); $('#identify-missing-rules-modal-submit').click(function (e) {
$("#identify-missing-rules-modal-form").submit(); e.preventDefault();
$("#identify_missing_rules_modal").modal("hide"); $('#identify-missing-rules-modal-form').submit();
}); $('#identify_missing_rules_modal').modal('hide');
}); });
})
</script> </script>

188
templates/modals/objects/manage_api_token_modal.html
View File

@ -1,118 +1,92 @@
<div
class="modal fade" <div class="modal fade"
tabindex="-1" tabindex="-1"
id="manage_api_token_modal" id="manage_api_token_modal"
role="dialog" role="dialog"
aria-labelledby="manage_api_token_modal" aria-labelledby="manage_api_token_modal"
aria-hidden="true" aria-hidden="true">
> <div class="modal-dialog">
<div class="modal-dialog"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <button type="button"
<button type="button" class="close" data-dismiss="modal"> class="close"
<span aria-hidden="true">&times;</span> data-dismiss="modal">
<span class="sr-only">Close</span> <span aria-hidden="true">&times;</span>
</button> <span class="sr-only">Close</span>
<h3 class="modal-title">Manage API Token</h3> </button>
</div> <h3 class="modal-title">Manage API Token</h3>
<div class="modal-body"> </div>
<p> <div class="modal-body">
Requesting a Token will invalidate all potential existing tokens. The <p>Requesting a Token will invalidate all potential existing tokens. The new token will only be shown once, so ensure to store it in secure place</p>
new token will only be shown once, so ensure to store it in secure <form id="request_api_token_form"
place accept-charset="UTF-8"
</p> action=""
<form data-remote="true"
id="request_api_token_form" method="post">
accept-charset="UTF-8" {% csrf_token %}
action="" <p>
data-remote="true" <label for="token-name">Name</label>
method="post" <input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
> <label for="valid-for">Valid for (in days)</label>
{% csrf_token %} <input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
<p> <input type="hidden" name="hidden" value="request-api-token">
<label for="token-name">Name</label> </p>
<input </form>
type="text" <div id="new-token">
id="token-name" <pre id="new-token-pre"></pre>
class="form-control" </div>
name="name" <div id="existing-tokens">
placeholder="Generic Token for {{ meta.user.username }}" {% for t in tokens %}
/> <form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post">
<label for="valid-for">Valid for (in days)</label> {% csrf_token %}
<input <div class="input-group">
type="number" <input type="hidden" name="hidden" value="delete">
id="valid-for" <input type="hidden" name="token-id" value="{{ t.pk }}">
class="form-control" <input type="text" class="form-control" value="{{ t.name|safe }}" disabled>
name="valid-for" <span class="input-group-btn">
value="90" <button type="submit" class="btn btn-danger">Delete</button>
/> </span>
<input type="hidden" name="hidden" value="request-api-token" /> </div>
</p> </form>
</form> {% endfor %}
<div id="new-token"> </div>
<pre id="new-token-pre"></pre> </div>
<div class="modal-footer">
<a id="manage_api_token_form_submit"
class="btn btn-primary"
href="#">Submit</a>
<button type="button"
class="btn btn-default"
data-dismiss="modal">Cancel
</button>
</div>
</div> </div>
<div id="existing-tokens">
{% for t in tokens %}
<form
id="delete-token-{{ forloop.counter0 }}"
accept-charset="UTF-8"
action="{{ meta.user.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="input-group">
<input type="hidden" name="hidden" value="delete" />
<input type="hidden" name="token-id" value="{{ t.pk }}" />
<input
type="text"
class="form-control"
value="{{ t.name|safe }}"
disabled
/>
<span class="input-group-btn">
<button type="submit" class="btn btn-danger">Delete</button>
</span>
</div>
</form>
{% endfor %}
</div>
</div>
<div class="modal-footer">
<a id="manage_api_token_form_submit" class="btn btn-primary" href="#"
>Submit</a
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#new-token").hide(); $('#new-token').hide()
$("#manage_api_token_form_submit").on("click", function (e) { $('#manage_api_token_form_submit').on('click', function (e) {
e.preventDefault(); e.preventDefault();
const formData = $("#request_api_token_form").serialize(); const formData = $('#request_api_token_form').serialize();
$.post("", formData, function (response) { $.post('', formData, function(response) {
$("#new-token-pre").text(response.raw_token); $('#new-token-pre').text(response.raw_token);
$("#new-token").show(); $('#new-token').show();
}); });
}); });
// Select all elements that start with 'delete-token-' // Select all elements that start with 'delete-token-'
$("[id^='delete-token-']").on("submit", function (e) { $("[id^='delete-token-']").on("submit", function(e) {
e.preventDefault(); e.preventDefault();
const formData = $(this).serialize(); const formData = $(this).serialize();
const form = $(this); const form = $(this);
$.post(this.action, formData, function (response) { $.post(this.action, formData, function(response) {
console.log(this); console.log(this);
form.remove(); form.remove();
}); });
}); });
});
});
</script> </script>

71
templates/modals/objects/publish_package_modal.html
View File

@ -1,52 +1,35 @@
{% load static %} {% load static %}
<!-- Publish a Package --> <!-- Publish a Package -->
<div id="publish_package_modal" class="modal" tabindex="-1"> <div id="publish_package_modal" class="modal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Publish Package</h5> <h5 class="modal-title">Publish Package</h5>
<button <button type="button" class="close" data-dismiss="modal" aria-label="Close">
type="button" <span aria-hidden="true">&times;</span>
class="close" </button>
data-dismiss="modal" </div>
aria-label="Close" <div class="modal-body">
> <p>Clicking on Publish will make this Package publicly available!</p>
<span aria-hidden="true">&times;</span> <form id="publish-package-modal-form" accept-charset="UTF-8" action="{{ current_package.url }}" data-remote="true" method="post">
</button> {% csrf_token %}
</div> <input type="hidden" name="hidden" value="publish-package">
<div class="modal-body"> </form>
<p>Clicking on Publish will make this Package publicly available!</p> </div>
<form <div class="modal-footer">
id="publish-package-modal-form" <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
accept-charset="UTF-8" <button type="button" class="btn btn-primary" id="publish-package-modal-form-submit">Publish</button>
action="{{ current_package.url }}" </div>
data-remote="true" </div>
method="post"
>
{% csrf_token %}
<input type="hidden" name="hidden" value="publish-package" />
</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="publish-package-modal-form-submit"
>
Publish
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#publish-package-modal-form-submit").click(function (e) {
e.preventDefault(); $('#publish-package-modal-form-submit').click(function(e){
$("#publish-package-modal-form").submit(); e.preventDefault();
$('#publish-package-modal-form').submit();
}); });
});
})
</script> </script>

283
templates/modals/objects/set_license_modal.html
View File

@ -1,198 +1,149 @@
<div <div class="modal fade"
class="modal fade" tabindex="-1"
tabindex="-1" id="set_license_modal"
id="set_license_modal" role="dialog"
role="dialog" aria-labelledby="set_license_modal"
aria-labelledby="set_license_modal" aria-hidden="true">
aria-hidden="true" <div class="modal-dialog">
> <div class="modal-content">
<div class="modal-dialog"> <div class="modal-header">
<div class="modal-content"> <button type="button"
<div class="modal-header"> class="close"
<button type="button" class="close" data-dismiss="modal"> data-dismiss="modal">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</button> </button>
<h3 class="modal-title">Set License</h3> <h3 class="modal-title">Set License</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
<p> <p>
Set the license for all data in this package: Set the license for all data in this package:
<br /> <br> <br>
<br /> (For more information please visit our <a target="#"
(For more information please visit our href="https://wiki.envipath.org/index.php/License">wiki</a>.)
<a target="#" href="https://wiki.envipath.org/index.php/License" </p>
>wiki</a </div>
>.) <div class="col-md-3">
</p> <div id="ccfig"></div>
</div> </div>
<div class="col-md-3"> </div>
<div id="ccfig"></div> <form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post">
</div> {% csrf_token %}
<div class="input-group">
<div class="radio">
<label><input type="radio" name="optlicense" onclick="cc()" id="ccradio">Creative commons license</label>
</div>
<div>
<div class="checkbox">
<label><input type="checkbox" value="" onclick="cc()" id="ccremix" disabled>Allow adaptations of your work to be shared</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" onclick="cc()" id="ccnocom" disabled>Prohibit commercial use</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" onclick="cc()" id="ccalike" disabled>Share only if others share alike</label>
</div>
</div>
<div class="radio">
<label><input type="radio" name="optlicense" onclick="cc()" id="noccradio">No creative commons license, contact package owner for license information</label>
</div>
</div>
<input type="hidden" id="license" name="license">
</form>
</div>
<div class="modal-footer">
<button id="set_license_form_submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div> </div>
<form
id="set_license_form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="input-group">
<div class="radio">
<label
><input
type="radio"
name="optlicense"
onclick="cc()"
id="ccradio"
/>Creative commons license</label
>
</div>
<div>
<div class="checkbox">
<label
><input
type="checkbox"
value=""
onclick="cc()"
id="ccremix"
disabled
/>Allow adaptations of your work to be shared</label
>
</div>
<div class="checkbox">
<label
><input
type="checkbox"
value=""
onclick="cc()"
id="ccnocom"
disabled
/>Prohibit commercial use</label
>
</div>
<div class="checkbox">
<label
><input
type="checkbox"
value=""
onclick="cc()"
id="ccalike"
disabled
/>Share only if others share alike</label
>
</div>
</div>
<div class="radio">
<label
><input
type="radio"
name="optlicense"
onclick="cc()"
id="noccradio"
/>No creative commons license, contact package owner for license
information</label
>
</div>
</div>
<input type="hidden" id="license" name="license" />
</form>
</div>
<div class="modal-footer">
<button id="set_license_form_submit" class="btn btn-primary">
Submit
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
function ccstring(ccremix, ccnocom, ccalike) {
function ccstring(ccremix, ccnocom, ccalike){
var ccstring = "by"; var ccstring = "by";
if (ccnocom) { if(ccnocom){
ccstring += "-nc"; ccstring +="-nc";
} }
if (!ccremix) { if(!ccremix){
ccstring += "-nd"; ccstring +="-nd";
} else { } else{
if (ccalike) { if(ccalike){
ccstring += "-sa"; ccstring +="-sa";
} }
} }
return ccstring; return ccstring;
} }
function cc() { function cc() {
var nocc = $("#noccradio").prop("checked"); var nocc = $('#noccradio').prop('checked')
var iscc = $("#ccradio").prop("checked"); var iscc = $('#ccradio').prop('checked');
if (nocc) { if(nocc) {
$("#ccradio").prop("checked", false); $('#ccradio').prop('checked', false);
$("#ccremix").prop("checked", false); $('#ccremix').prop('checked', false);
$("#ccnocom").prop("checked", false); $('#ccnocom').prop('checked', false);
$("#ccalike").prop("checked", false); $('#ccalike').prop('checked', false);
$("#ccremix").prop("disabled", true); $('#ccremix').prop('disabled', true);
$("#ccnocom").prop("disabled", true); $('#ccnocom').prop('disabled', true);
$("#ccalike").prop("disabled", true); $('#ccalike').prop('disabled', true);
} else if (iscc) { } else if (iscc) {
$("#ccremix").prop("disabled", false); $('#ccremix').prop('disabled', false);
$("#ccnocom").prop("disabled", false); $('#ccnocom').prop('disabled', false);
if ($("#ccremix").prop("checked")) { if ($('#ccremix').prop('checked')) {
$("#ccalike").prop("disabled", false); $('#ccalike').prop('disabled', false);
} else { } else {
$("#ccalike").prop("disabled", true); $('#ccalike').prop('disabled', true);
} }
} }
var remix = $("#ccremix").prop("checked"); var remix = $('#ccremix').prop('checked');
var nocom = $("#ccnocom").prop("checked"); var nocom = $('#ccnocom').prop('checked');
var alike = $("#ccalike").prop("checked"); var alike = $('#ccalike').prop('checked');
if (nocc) { if(nocc) {
$("#set_license_form_submit").prop("disabled", false); $('#set_license_form_submit').prop('disabled', false);
$("#ccfig").empty(); $('#ccfig').empty();
$("#license").val("no-license"); $('#license').val('no-license')
} else if (iscc) { } else if(iscc) {
$("#set_license_form_submit").prop("disabled", false); $('#set_license_form_submit').prop('disabled', false);
$("#ccfig").empty(); $('#ccfig').empty();
var ccstr = ccstring(remix, nocom, alike); var ccstr = ccstring(remix, nocom, alike)
var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`; var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`; var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
var img_tpl = `<a href='${link}' target="_blank"> var img_tpl = `<a href='${link}' target="_blank">
<img src='${imageLink}'> <img src='${imageLink}'>
</a>`; </a>`;
$("#ccfig").append(img_tpl); $('#ccfig').append(img_tpl);
$("#license").val(ccstr); $('#license').val(ccstr);
} else { } else {
$("#ccfig").empty(); $('#ccfig').empty();
$("#set_license_form_submit").prop("disabled", true); $('#set_license_form_submit').prop('disabled', true);
$("#license").val("no-license"); $('#license').val('no-license')
} }
}
$(function () { }
$(function() {
// Disable by default as nothing is selected // Disable by default as nothing is selected
cc(); cc();
$("#set_license_form_submit").prop("disabled", true); $('#set_license_form_submit').prop('disabled', true);
$("#set_license_form_submit").on("click", function (e) { $('#set_license_form_submit').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$("#set_license_form").submit(); $('#set_license_form').submit();
}); });
}); });
</script>
</script>

87
templates/modals/objects/update_scenario_additional_information_modal.html
View File

@ -1,62 +1,39 @@
{% load static %} {% load static %}
<!-- Update Scenario Additional Information--> <!-- Update Scenario Additional Information-->
<div <div id="update_scenario_additional_information_modal" class="modal" tabindex="-1">
id="update_scenario_additional_information_modal" <div class="modal-dialog">
class="modal" <div class="modal-content">
tabindex="-1" <div class="modal-header">
> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div class="modal-dialog"> <span aria-hidden="true">&times;</span>
<div class="modal-content"> </button>
<div class="modal-header"> <h3 class="modal-title">Update Additional Information</h3>
<button </div>
type="button" <div class="modal-body">
class="close" <form id="edit-scenario-additional-information-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
data-dismiss="modal" {% csrf_token %}
aria-label="Close" {% for widget in update_widgets %}
> {{ widget|safe }}
<span aria-hidden="true">&times;</span> {% endfor %}
</button> <input type="hidden" name="hidden" value="set-additional-information">
<h3 class="modal-title">Update Additional Information</h3> </form>
</div> </div>
<div class="modal-body"> <div class="modal-footer">
<form <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
id="edit-scenario-additional-information-modal-form" <button type="button" class="btn btn-primary" id="edit-scenario-additional-information-modal-submit">Update</button>
accept-charset="UTF-8" </div>
action="" </div>
data-remote="true"
method="post"
>
{% csrf_token %}
{% for widget in update_widgets %}
{{ widget|safe }}
{% endfor %}
<input
type="hidden"
name="hidden"
value="set-additional-information"
/>
</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="edit-scenario-additional-information-modal-submit"
>
Update
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function() {
$("#edit-scenario-additional-information-modal-submit").click(function (e) {
e.preventDefault(); $('#edit-scenario-additional-information-modal-submit').click(function(e){
$("#edit-scenario-additional-information-modal-form").submit(); e.preventDefault();
$('#edit-scenario-additional-information-modal-form').submit();
}); });
});
});
</script> </script>

273
templates/modals/predict_modal.html
View File

@ -1,178 +1,115 @@
{% load static %} {% load static %}
<div <div class="modal fade bs-modal-lg" id="predict_modal" tabindex="-1" aria-labelledby="predict_modal" aria-modal="true"
class="modal fade bs-modal-lg" role="dialog">
id="predict_modal" <div class="modal-dialog modal-lg">
tabindex="-1" <div class="modal-content">
aria-labelledby="predict_modal" <div class="modal-header">
aria-modal="true" <button type="button" class="close" data-dismiss="modal" aria-label="Close">
role="dialog" <span aria-hidden="true">×</span>
> </button>
<div class="modal-dialog modal-lg"> <h4 class="modal-title">Predict a Pathway</h4>
<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">Predict a Pathway</h4>
</div>
<div class="modal-body">
<form
id="predict_modal_form"
accept-charset="UTF-8"
action="{{ meta.current_package.url }}/pathway"
data-remote="true"
method="post"
>
{% csrf_token %}
<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="Description"
/>
</div> </div>
<div class="col-md-6"> <div class="modal-body">
<label for="predict">Predict pathway or build yourself?</label> <form id="predict_modal_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/pathway" data-remote="true" method="post">
<div class="radio" id="predict"> {% csrf_token %}
<p> <div class="row">
<label> <div class="col-md-6">
<input <label for="name">Name</label>
type="radio" <input id="name" class="form-control" name="name" placeholder="Name"/>
name="predict" <label for="description">Description</label>
id="radioPredict" <input id="description" class="form-control" name="description" placeholder="Description"/>
value="predict" </div>
checked <div class="col-md-6">
/>Predict pathway <label for="predict">Predict pathway or build yourself?</label>
</label> <div class="radio" id="predict">
</p> <p>
<p> <label>
<label> <input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict
<input pathway
type="radio" </label>
name="predict" </p>
id="radioIncremental" <p>
value="incremental" <label>
/>Incremental prediction <input type="radio" name="predict" id="radioIncremental" value="incremental"/>Incremental
</label> prediction
</p> </label>
<p> </p>
<label> <p>
<input <label>
type="radio" <input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
name="predict" </label>
id="radioBuild" </p>
value="build" </div>
/>Build pathway </div>
</label> </div>
</p> <label for="predict-modal-smiles">SMILES</label>
</div> <input type="text" class="form-control" name="smiles" placeholder="SMILES" id="predict-modal-smiles">
</div> <p id="ketcher_container"></p>
</div> <div>
<label for="predict-modal-smiles">SMILES</label> <iframe id="predict-modal-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
<input height="510"></iframe>
type="text" </div>
class="form-control"
name="smiles"
placeholder="SMILES"
id="predict-modal-smiles"
/>
<p id="ketcher_container"></p>
<div>
<iframe
id="predict-modal-ketcher"
src="{% static '/js/ketcher2/ketcher.html' %}"
width="100%"
height="510"
></iframe>
</div>
<label for="prediction-setting">Default Prediction Setting</label> <label for="prediction-setting">Default Prediction Setting</label>
<select <select id="prediction-setting" name="prediction-setting" class="form-control"
id="prediction-setting" data-width='100%'>
name="prediction-setting" <option disabled>Select a Setting</option>
class="form-control" {% for s in meta.available_settings %}
data-width="100%" <option value="{{ s.url }}"{% if s.id == meta.user.default_setting.id %}selected{% endif %}>
> {{ s.name|safe }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
<option disabled>Select a Setting</option> </option>
{% for s in meta.available_settings %} {% endfor %}
<option </select>
value="{{ s.url }}"
{% if s.id == meta.user.default_setting.id %}selected{% endif %} </form>
> </div>
{{ s.name|safe }}{% if s.id == meta.user.default_setting.id %} <div class="modal-footer">
<i>(User default)</i> <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
{% endif %} </button>
</option> <button type="button" class="btn btn-primary" id="predictButton">Predict</button>
{% endfor %} </div>
</select> </div>
</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="predictButton">
Predict
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
function predictModalketcherToPredictModalTextInput() {
$("#predict-modal-smiles").val(this.ketcher.getSmiles());
}
$(function () { function predictModalketcherToPredictModalTextInput() {
$("#predict-modal-ketcher").on("load", function () { $('#predict-modal-smiles').val(this.ketcher.getSmiles());
const checkKetcherReady = () => { }
win = this.contentWindow;
if (win.ketcher && "editor" in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: predictModalketcherToPredictModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady(); $(function() {
$('#predict-modal-ketcher').on('load', function() {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
win.ketcher.editor.event.change.handlers.push({
once: false,
priority: 0,
f: predictModalketcherToPredictModalTextInput,
ketcher: win.ketcher
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady();
})
$('#predictButton').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled", true);
// loading button
// validation
// existing pws...
// submit form
$('#predict_modal_form').submit();
}); });
});
$("#predictButton").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// loading button
// validation
// existing pws...
// submit form
$("#predict_modal_form").submit();
});
});
</script> </script>

943
templates/modals/search_modal.html
View File

File diff suppressed because it is too large Load Diff

275
templates/objects/composite_rule.html
View File

@ -2,179 +2,126 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_rule_modal.html" %} {% include "modals/objects/edit_rule_modal.html" %}
{% include "modals/objects/generic_set_aliases_modal.html" %} {% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %} {% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/generic_copy_object_modal.html" %} {% include "modals/objects/generic_copy_object_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="rule-detail"> <div class="panel-group" id="rule-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ rule.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ rule.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/rule.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/rule.html" %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
<p>{{ rule.description|safe }}</p>
</div>
{% if rule.aliases %}
<!-- Aliases -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="rule-aliases-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-aliases"
>Aliases</a
>
</h4>
</div>
<div id="rule-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in rule.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Reaction Patterns -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="rule-reaction-patterns-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-reaction-patterns"
>Reaction Patterns</a
>
</h4>
</div>
<div id="rule-reaction-patterns" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in rule.srs %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<div align="center">
<p>{{ r.as_svg|safe }}</p>
</div> </div>
{% endfor %}
</div> </div>
</div> <div class="panel-body">
<p>
{{ rule.description|safe }}
</p>
</div>
<!-- Scenarios --> {% if rule.aliases %}
{% if rule.scenarios.all %} <!-- Aliases -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="rule-scenario-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="rule-scenario" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for s in rule.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if rule.enzymelinks %}
<!-- EC Numbers -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="rule-ec-numbers-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-ec-numbers"
>EC Numbers</a
>
</h4>
</div>
<div id="rule-ec-numbers" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for k, v in rule.get_grouped_enzymelinks.items %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title"> <h4 class="panel-title">
<a <a id="rule-aliases-link" data-toggle="collapse" data-parent="#rule-detail"
id="{{ k|slugify }}_Link" href="#rule-aliases">Aliases</a>
data-toggle="collapse"
data-parent="#{{ k|slugify }}_Accordion"
href="#{{ k|slugify }}"
>
{{ k }}
</a>
</h4> </h4>
</div> </div>
<div id="{{ k|slugify }}" class="panel-collapse in collapse"> <div id="rule-aliases" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
{% for enzyme in v %} {% for alias in rule.aliases %}
<a class="list-group-item" href="{{ enzyme.url }}"> <a class="list-group-item">{{ alias }}</a>
{{ enzyme.ec_number }} {% endfor %}
<div style="position:absolute;bottom:10px;left:100px;">
{{ enzyme.name }}
</div>
<div style="float:right;">
{{ enzyme.linking_method }}
</div>
</a>
{% endfor %}
</div> </div>
</div> </div>
{% endfor %} {% endif %}
</div>
<!-- Reaction Patterns -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reaction-patterns-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reaction-patterns">Reaction Patterns</a>
</h4>
</div> </div>
{% endif %} <div id="rule-reaction-patterns" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for r in rule.srs %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<div align="center">
<p>
{{r.as_svg|safe}}
</p>
</div>
{% endfor %}
</div>
</div>
<!-- Scenarios -->
{% if rule.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-scenario">Scenarios</a>
</h4>
</div>
<div id="rule-scenario" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for s in rule.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
{% endfor %}
</div>
</div>
{% endif %}
{% if rule.enzymelinks %}
<!-- EC Numbers -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-ec-numbers">EC Numbers</a>
</h4>
</div>
<div id="rule-ec-numbers" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for k, v in rule.get_grouped_enzymelinks.items %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="{{ k|slugify }}_Link" data-toggle="collapse"
data-parent="#{{ k|slugify }}_Accordion"
href="#{{ k|slugify }}">
{{ k }}
</a>
</h4>
</div>
<div id="{{ k|slugify }}" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for enzyme in v %}
<a class="list-group-item" href="{{ enzyme.url }}">
{{ enzyme.ec_number }}
<div style="position:absolute;bottom:10px;left:100px;">{{ enzyme.name }}</div>
<div style="float:right;">{{ enzyme.linking_method }}</div>
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div> </div>
</div> </div>
{% endblock content %} {% endblock content %}

582
templates/objects/compound.html
View File

@ -2,370 +2,240 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_compound_modal.html" %} {% include "modals/objects/edit_compound_modal.html" %}
{% include "modals/objects/generic_set_aliases_modal.html" %} {% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/add_structure_modal.html" %} {% include "modals/objects/add_structure_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %} {% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/generic_set_external_reference_modal.html" %} {% include "modals/objects/generic_set_external_reference_modal.html" %}
{% include "modals/objects/generic_copy_object_modal.html" %} {% include "modals/objects/generic_copy_object_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="compound-detail"> <div class="panel-group" id="compound-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ compound.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ compound.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/compound.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button" <div class="panel-body">
aria-haspopup="true" <p>
aria-expanded="false" The structures stored in this compound can be found at <a target="_blank"
><span class="glyphicon glyphicon-wrench"></span> Actions href="{{ compound.url }}/structure"
<span class="caret"></span><span style="padding-right:1em"></span role="button">Compound structures
></a> &gt;&gt;</a>
<ul id="actionsList" class="dropdown-menu"> </p>
{% block actions %} </div>
{% include "actions/objects/compound.html" %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
<p>
The structures stored in this compound can be found at
<a target="_blank" href="{{ compound.url }}/structure" role="button"
>Compound structures &gt;&gt;</a
>
</p>
</div>
{% if compound.aliases %} {% if compound.aliases %}
<!-- Aliases --> <!-- Aliases -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="compound-aliases-link" data-toggle="collapse" data-parent="#compound-detail"
> href="#compound-aliases">Aliases</a>
<h4 class="panel-title"> </h4>
<a </div>
id="compound-aliases-link" <div id="compound-aliases" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#compound-detail" {% for alias in compound.aliases %}
href="#compound-aliases" <a class="list-group-item">{{ alias }}</a>
>Aliases</a {% endfor %}
> </div>
</h4> </div>
</div>
<div id="compound-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in compound.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Description -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-desc-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-desc"
>Description</a
>
</h4>
</div>
<div id="compound-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound.description|safe }}
</div>
</div>
<!-- Image -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-image-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-image"
>Image Representation</a
>
</h4>
</div>
<div id="compound-image" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ compound.default_structure.as_svg|safe }}
</div>
</div>
</div>
<!-- SMILES -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-smiles-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-smiles"
>SMILES Representation</a
>
</h4>
</div>
<div id="compound-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound.default_structure.smiles }}
</div>
</div>
<!-- Canonical SMILES -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-canonical-smiles-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-canonical-smiles"
>Canonical SMILES Representation</a
>
</h4>
</div>
<div id="compound-canonical-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound.default_structure.canonical_smiles }}
</div>
</div>
<!-- InChiKey -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-inchi-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-inchi"
>InChIKey</a
>
</h4>
</div>
<div id="compound-inchi" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound.default_structure.inchikey }}
</div>
</div>
<!-- Reactions -->
{% if compound.related_reactions %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-reaction-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-reaction"
>Reactions</a
>
</h4>
</div>
<div id="compound-reaction" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in compound.related_reactions %}
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Pathways -->
{% if compound.related_pathways %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-pathway-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-pathway"
>Pathways</a
>
</h4>
</div>
<div id="compound-pathway" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in compound.related_pathways %}
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Scenarios -->
{% if compound.scenarios.all %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-scenario-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="compound-scenario" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for s in compound.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
<!-- External Identifiers -->
{% if compound.get_external_identifiers %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-external-identifier-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-external-identifier"
>External Identifier</a
>
</h4>
</div>
<div
id="compound-external-identifier"
class="panel-collapse in collapse"
>
<div class="panel-body list-group-item">
{% if compound.get_pubchem_compound_identifiers %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-pubchem-identifier-link"
data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-pubchem-identifier"
>PubChem Compound Identifier</a
>
</h4>
</div>
<div
id="compound-pubchem-identifier"
class="panel-collapse in collapse"
>
{% for eid in compound.get_pubchem_compound_identifiers %}
<a class="list-group-item" href="{{ eid.external_url }}"
>CID{{ eid.identifier_value }}</a
>
{% endfor %}
</div>
{% endif %} {% endif %}
{% if compound.get_pubchem_substance_identifiers %}
<div <!-- Description -->
class="panel panel-default panel-heading list-group-item" <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
style="background-color:silver"
>
<h4 class="panel-title"> <h4 class="panel-title">
<a <a id="compound-desc-link" data-toggle="collapse" data-parent="#compound-detail"
id="compound-pubchem-identifier-link" href="#compound-desc">Description</a>
data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-pubchem-identifier"
>PubChem Substance Identifier</a
>
</h4> </h4>
</div> </div>
<div <div id="compound-desc" class="panel-collapse collapse in">
id="compound-pubchem-identifier" <div class="panel-body list-group-item">
class="panel-collapse in collapse" {{ compound.description|safe }}
> </div>
{% for eid in compound.get_pubchem_substance_identifiers %} </div>
<a class="list-group-item" href="{{ eid.external_url }}"
>SID{{ eid.identifier_value }}</a <!-- Image -->
> <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
{% endfor %}
</div>
{% endif %}
{% if compound.get_chebi_identifiers %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title"> <h4 class="panel-title">
<a <a id="compound-image-link" data-toggle="collapse" data-parent="#compound-detail"
id="compound-chebi-identifier-link" href="#compound-image">Image Representation</a>
data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-chebi-identifier"
>ChEBI Identifier</a
>
</h4> </h4>
</div> </div>
<div <div id="compound-image" class="panel-collapse collapse in">
id="compound-chebi-identifier" <div class="panel-body list-group-item">
class="panel-collapse in collapse" <div id="image-div" align="center">
> {{ compound.default_structure.as_svg|safe }}
{% for eid in compound.get_chebi_identifiers %} </div>
<a class="list-group-item" href="{{ eid.external_url }}" </div>
>CHEBI:{{ eid.identifier_value }}</a </div>
>
{% endfor %} <!-- SMILES -->
</div> <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-smiles">SMILES Representation</a>
</h4>
</div>
<div id="compound-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ compound.default_structure.smiles }}
</div>
</div>
<!-- Canonical SMILES -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-canonical-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-canonical-smiles">Canonical SMILES Representation</a>
</h4>
</div>
<div id="compound-canonical-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ compound.default_structure.canonical_smiles }}
</div>
</div>
<!-- InChiKey -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-inchi-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-inchi">InChIKey</a>
</h4>
</div>
<div id="compound-inchi" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ compound.default_structure.inchikey }}
</div>
</div>
<!-- Reactions -->
{% if compound.related_reactions %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-reaction-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-reaction">Reactions</a>
</h4>
</div>
<div id="compound-reaction" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for r in compound.related_reactions %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
{% endfor %}
</div>
</div>
{% endif %} {% endif %}
</div>
<!-- Pathways -->
{% if compound.related_pathways %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-pathway-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-pathway">Pathways</a>
</h4>
</div>
<div id="compound-pathway" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for r in compound.related_pathways %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Scenarios -->
{% if compound.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-scenario-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-scenario">Scenarios</a>
</h4>
</div>
<div id="compound-scenario" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for s in compound.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- External Identifiers -->
{% if compound.get_external_identifiers %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-external-identifier-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-external-identifier">External Identifier</a>
</h4>
</div>
<div id="compound-external-identifier" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% if compound.get_pubchem_compound_identifiers %}
<div class="panel panel-default panel-heading list-group-item"
style="background-color:silver">
<h4 class="panel-title">
<a id="compound-pubchem-identifier-link" data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-pubchem-identifier">PubChem Compound Identifier</a>
</h4>
</div>
<div id="compound-pubchem-identifier" class="panel-collapse collapse in">
{% for eid in compound.get_pubchem_compound_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">CID{{ eid.identifier_value }}</a>
{% endfor %}
</div>
{% endif %}
{% if compound.get_pubchem_substance_identifiers %}
<div class="panel panel-default panel-heading list-group-item"
style="background-color:silver">
<h4 class="panel-title">
<a id="compound-pubchem-identifier-link" data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-pubchem-identifier">PubChem Substance Identifier</a>
</h4>
</div>
<div id="compound-pubchem-identifier" class="panel-collapse collapse in">
{% for eid in compound.get_pubchem_substance_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">SID{{ eid.identifier_value }}</a>
{% endfor %}
</div>
{% endif %}
{% if compound.get_chebi_identifiers %}
<div class="panel panel-default panel-heading list-group-item"
style="background-color:silver">
<h4 class="panel-title">
<a id="compound-chebi-identifier-link" data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-chebi-identifier">ChEBI Identifier</a>
</h4>
</div>
<div id="compound-chebi-identifier" class="panel-collapse collapse in">
{% for eid in compound.get_chebi_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">CHEBI:{{ eid.identifier_value }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div> </div>
{% endif %}
</div> </div>
</div>
{% endblock content %} {% endblock content %}

218
templates/objects/compound_structure.html
View File

@ -2,149 +2,101 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_compound_structure_modal.html" %} {% include "modals/objects/edit_compound_structure_modal.html" %}
{% include "modals/objects/generic_set_aliases_modal.html" %} {% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %} {% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/generic_set_external_reference_modal.html" %} {% include "modals/objects/generic_set_external_reference_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="compound-structure-detail"> <div class="panel-group" id="compound-structure-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ compound_structure.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ compound_structure.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/compound_structure.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button" <div class="panel-body">
aria-haspopup="true" <p> {{ compound_structure.description|safe }} </p>
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/compound_structure.html" %}
{% endblock %}
</ul>
</div> </div>
</div>
<div class="panel-body">
<p>{{ compound_structure.description|safe }}</p>
</div>
<!-- Image --> <!-- Image -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="compound-structure-image-link" data-toggle="collapse" data-parent="#compound-structure-detail"
> href="#compound-structure-image">Image Representation</a>
<h4 class="panel-title"> </h4>
<a </div>
id="compound-structure-image-link" <div id="compound-structure-image" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#compound-structure-detail" <div id="image-div" align="center">
href="#compound-structure-image" {{ compound_structure.as_svg|safe }}
>Image Representation</a </div>
> </div>
</h4>
</div>
<div id="compound-structure-image" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ compound_structure.as_svg|safe }}
</div>
</div> </div>
</div>
<!-- SMILES --> <!-- SMILES -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="compound-structure-smiles-link" data-toggle="collapse" data-parent="#compound-structure-detail"
> href="#compound-structure-smiles">SMILES Representation</a>
<h4 class="panel-title"> </h4>
<a </div>
id="compound-structure-smiles-link" <div id="compound-structure-smiles" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#compound-structure-detail" {{ compound_structure.smiles }}
href="#compound-structure-smiles" </div>
>SMILES Representation</a
>
</h4>
</div>
<div id="compound-structure-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound_structure.smiles }}
</div> </div>
</div>
{% if compound_structure.aliases %} {% if compound_structure.aliases %}
<!-- Aliases --> <!-- Aliases -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="compound-structure-aliases-link" data-toggle="collapse" data-parent="#compound-structure-detail"
> href="#compound-structure-aliases">Aliases</a>
<h4 class="panel-title"> </h4>
<a </div>
id="compound-structure-aliases-link" <div id="compound-structure-aliases" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#compound-structure-detail" {% for alias in compound_structure.aliases %}
href="#compound-structure-aliases" <a class="list-group-item">{{ alias }}</a>
>Aliases</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div id="compound-structure-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in compound_structure.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %}
{% if compound_structure.scenarios.all %} {% if compound_structure.scenarios.all %}
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="compound-structure-scenario-link" data-toggle="collapse" data-parent="#compound-structure-detail"
> href="#compound-structure-scenario">Scenarios</a>
<h4 class="panel-title"> </h4>
<a </div>
id="compound-structure-scenario-link" <div id="compound-structure-scenario" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#compound-structure-detail" {% for s in compound_structure.scenarios.all %}
href="#compound-structure-scenario" <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
>Scenarios</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div
id="compound-structure-scenario"
class="panel-collapse in collapse"
>
<div class="panel-body list-group-item">
{% for s in compound_structure.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Reactions --> <!-- Reactions -->
<!-- Pathways -->
<!-- Pathways -->
</div> </div>
</div>
</div>
{% endblock content %} {% endblock content %}

336
templates/objects/edge.html
View File

@ -2,221 +2,141 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{# {% include "modals/objects/edit_edge_modal.html" %}#} {# {% include "modals/objects/edit_edge_modal.html" %}#}
{% include "modals/objects/generic_set_aliases_modal.html" %} {% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %} {% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="edge-detail"> <div class="panel-group" id="edge-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ edge.edge_label.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ edge.edge_label.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/edge.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button"
aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/edge.html" %}
{% endblock %}
</ul>
</div>
</div>
<!-- Description --> <!-- Description -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="edge-desc-link" data-toggle="collapse" data-parent="#edge-detail"
> href="#edge-desc">Description</a>
<h4 class="panel-title"> </h4>
<a </div>
id="edge-desc-link" <div id="edge-desc" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#edge-detail" {{ edge.description|safe }}
href="#edge-desc" </div>
>Description</a </div>
>
</h4>
</div>
<div id="edge-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ edge.description|safe }}
</div>
</div>
{% if edge.aliases %} {% if edge.aliases %}
<!-- Aliases --> <!-- Aliases -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="edge-aliases-link" data-toggle="collapse" data-parent="#edge-detail"
> href="#edge-aliases">Aliases</a>
<h4 class="panel-title"> </h4>
<a </div>
id="edge-aliases-link" <div id="edge-aliases" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#edge-detail" {% for alias in edge.aliases %}
href="#edge-aliases" <a class="list-group-item">{{ alias }}</a>
>Aliases</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div id="edge-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in edge.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Image --> <!-- Image -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="edge-image-link" data-toggle="collapse" data-parent="#edge-detail"
> href="#edge-image">Image Representation</a>
<h4 class="panel-title"> </h4>
<a </div>
id="edge-image-link" <div id="edge-image" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#edge-detail" <div id="image-div" align="center">
href="#edge-image" {{ edge.edge_label.as_svg|safe }}
>Image Representation</a </div>
> </div>
</h4> </div>
</div>
<div id="edge-image" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ edge.edge_label.as_svg|safe }}
</div>
</div>
</div>
<!-- Reaction Description --> <!-- Reaction Description -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="edge-description-link" data-toggle="collapse" data-parent="#edge-description-detail"
> href="#edge-description-smiles">Reaction Description</a>
<h4 class="panel-title"> </h4>
<a </div>
id="edge-description-link" <div id="edge-description-smiles" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#edge-description-detail" {% for educt in edge.start_nodes.all %}
href="#edge-description-smiles" <a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
>Reaction Description</a {% endfor %}
> <span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
</h4> aria-hidden="true"></span>
</div> {% for product in edge.end_nodes.all %}
<div id="edge-description-smiles" class="panel-collapse in collapse"> <a class="btn btn-default" href="{{ product.url }}">{{ product.name|safe }}</a>
<div class="panel-body list-group-item"> {% endfor %}
{% for educt in edge.start_nodes.all %} </div>
<a class="btn btn-default" href="{{ educt.url }}" </div>
>{{ educt.name|safe }}</a
>
{% endfor %}
<span
class="glyphicon glyphicon-arrow-right"
style="margin-left:5em;margin-right:5em;"
aria-hidden="true"
></span>
{% for product in edge.end_nodes.all %}
<a class="btn btn-default" href="{{ product.url }}"
>{{ product.name|safe }}</a
>
{% endfor %}
</div>
</div>
<!-- SMIRKS --> <!-- SMIRKS -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="edge-smirks-link" data-toggle="collapse" data-parent="#edge-detail"
> href="#edge-smirks">SMIRKS Representation</a>
<h4 class="panel-title"> </h4>
<a </div>
id="edge-smirks-link" <div id="edge-smirks" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#edge-detail" {{ edge.edge_label.smirks }}
href="#edge-smirks" </div>
>SMIRKS Representation</a </div>
>
</h4>
</div>
<div id="edge-smirks" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ edge.edge_label.smirks }}
</div>
</div>
{% if edge.edge_label.rules.all %} {% if edge.edge_label.rules.all %}
<!-- Rules --> <!-- Rules -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="edge-rules-link" data-toggle="collapse" data-parent="#edge-detail"
> href="#edge-rules">Rules</a>
<h4 class="panel-title"> </h4>
<a </div>
id="edge-rules-link" <div id="edge-rules" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#edge-detail" {% for r in edge.edge_label.rules.all %}
href="#edge-rules" <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
>Rules</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div id="edge-rules" class="panel-collapse in collapse">
<div class="panel-body list-group-item"> {% if edge.scenarios.all %}
{% for r in edge.edge_label.rules.all %} <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<a class="list-group-item" href="{{ r.url }}" <h4 class="panel-title">
>{{ r.name|safe }}</a <a id="edge-scenario-link" data-toggle="collapse" data-parent="#edge-detail"
> href="#edge-scenario">Scenarios</a>
{% endfor %} </h4>
</div> </div>
</div> <div id="edge-scenario" class="panel-collapse collapse in">
{% endif %} <div class="panel-body list-group-item">
{% for s in edge.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
{% endfor %}
</div>
</div>
{% endif %}
{% if edge.scenarios.all %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="edge-scenario-link"
data-toggle="collapse"
data-parent="#edge-detail"
href="#edge-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="edge-scenario" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for s in edge.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
</div> </div>
</div>
{% endblock content %} {% endblock content %}

245
templates/objects/enzymelink.html
View File

@ -1,164 +1,105 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% block content %} {% block content %}
<div class="panel-group" id="enzyme-detail">
<div class="panel panel-default">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ enzymelink.ec_number }}
</div>
<!-- Name --> <div class="panel-group" id="enzyme-detail">
<div <div class="panel panel-default">
class="panel panel-default panel-heading list-group-item" <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
style="background-color:silver" {{ enzymelink.ec_number }}
> </div>
<h4 class="panel-title">
<a
id="enzyme-name-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-name"
>Enzyme Name</a
>
</h4>
</div>
<div id="enzyme-name" class="panel-collapse in collapse">
<div class="panel-body list-group-item">{{ enzymelink.name }}</div>
</div>
<!-- Linking Method --> <!-- Name -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="enzyme-name-link" data-toggle="collapse" data-parent="#enzyme-detail"
> href="#enzyme-name">Enzyme Name</a>
<h4 class="panel-title"> </h4>
<a </div>
id="enzyme-linking-link" <div id="enzyme-name" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#enzyme-detail" {{ enzymelink.name }}
href="#enzyme-linking" </div>
>Linking Method</a </div>
>
</h4>
</div>
<div id="enzyme-linking" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ enzymelink.linking_method }}. &nbsp;<a
href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks"
target="#"
>Learn more &gt;&gt;</a
>
</div>
</div>
{% if enzymelink.kegg_reaction_links %} <!-- Linking Method -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="enzyme-linking-link" data-toggle="collapse" data-parent="#enzyme-detail"
> href="#enzyme-linking">Linking Method</a>
<h4 class="panel-title"> </h4>
<a </div>
id="enzyme-evidence-link" <div id="enzyme-linking" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#enzyme-detail" {{ enzymelink.linking_method }}. &nbsp;<a
href="#enzyme-evidence" href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks" target="#">Learn more &gt;&gt;</a>
>Linking Evidence</a </div>
> </div>
</h4>
</div>
<div id="enzyme-evidence" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for kl in enzymelink.kegg_reaction_links %}
<a class="list-group-item" href="{{ kl.external_url }}"
>{{ kl.identifier_value }}</a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if enzymelink.reaction_evidence.all %} {% if enzymelink.kegg_reaction_links %}
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="enzyme-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
> href="#enzyme-evidence">Linking Evidence</a>
<h4 class="panel-title"> </h4>
<a </div>
id="enzyme-reaction-evidence-link" <div id="enzyme-evidence" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#enzyme-detail" {% for kl in enzymelink.kegg_reaction_links %}
href="#enzyme-reaction-evidence" <a class="list-group-item"
>Linking Evidence - enviPath Reactions</a href="{{ kl.external_url }}">{{ kl.identifier_value }}</a>
> {% endfor %}
</h4> </div>
</div> </div>
<div id="enzyme-reaction-evidence" class="panel-collapse in collapse"> {% endif %}
<div class="panel-body list-group-item">
{% for r in enzymelink.reaction_evidence.all %}
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name }} <i>({{ r.package.name }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if enzymelink.edge_evidence.all %} {% if enzymelink.reaction_evidence.all %}
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="enzyme-reaction-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
> href="#enzyme-reaction-evidence">Linking Evidence - enviPath Reactions</a>
<h4 class="panel-title"> </h4>
<a </div>
id="enzyme-edge-evidence-link" <div id="enzyme-reaction-evidence" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#enzyme-detail" {% for r in enzymelink.reaction_evidence.all %}
href="#enzyme-edge-evidence" <a class="list-group-item" href="{{ r.url }}">{{ r.name }} <i>({{ r.package.name }})</i></a>
>Linking Evidence - enviPath Pathways</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div id="enzyme-edge-evidence" class="panel-collapse in collapse">
<div class="panel-body list-group-item"> {% if enzymelink.edge_evidence.all %}
{% for e in enzymelink.edge_evidence.all %} <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<a class="list-group-item" href="{{ e.pathway.url }}" <h4 class="panel-title">
>{{ e.pathway.name }} <i>({{ r.package.name }})</i></a <a id="enzyme-edge-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
> href="#enzyme-edge-evidence">Linking Evidence - enviPath Pathways</a>
{% endfor %} </h4>
</div> </div>
</div> <div id="enzyme-edge-evidence" class="panel-collapse collapse in">
{% endif %} <div class="panel-body list-group-item">
{% for e in enzymelink.edge_evidence.all %}
<a class="list-group-item" href="{{ e.pathway.url }}">{{ e.pathway.name }}
<i>({{ r.package.name }})</i></a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- External DB Reference -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="enzyme-external-identifier-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-external-identifier">External DB References</a>
</h4>
</div>
<div id="enzyme-external-identifier" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<a class="list-group-item"
href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ enzymelink.ec_number }}"
target="_blank"> Brenda entry for {{ enzymelink.ec_number }}</a>
</div>
</div>
<!-- External DB Reference -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="enzyme-external-identifier-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-external-identifier"
>External DB References</a
>
</h4>
</div>
<div id="enzyme-external-identifier" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<a
class="list-group-item"
href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ enzymelink.ec_number }}"
target="_blank"
>
Brenda entry for {{ enzymelink.ec_number }}</a
>
</div> </div>
</div>
</div> </div>
</div>
{% endblock content %} {% endblock content %}

117
templates/objects/group.html
View File

@ -2,90 +2,63 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_group_modal.html" %} {% include "modals/objects/edit_group_modal.html" %}
{% include "modals/objects/edit_group_member_modal.html" %} {% include "modals/objects/edit_group_member_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="package-detail"> <div class="panel-group" id="package-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ group.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ group.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/group.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button" <div class="panel-body">
aria-haspopup="true" <p> {{ group.description|safe }} </p>
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/group.html" %}
{% endblock %}
</ul>
</div> </div>
</div>
<div class="panel-body">
<p>{{ group.description|safe }}</p>
</div>
</div> </div>
<p></p> <p></p>
<div class="panel panel-default"> <div class="panel panel-default">
<div <div id="member-panel" style="font-size:2rem;height: 46px" class="panel-heading">Members</div>
id="member-panel" <div class="panel-body">
style="font-size:2rem;height: 46px" <p>List of members of this group</p>
class="panel-heading" </div>
> <ul class="list-group">
Members {% for um in group.user_member.all %}
</div> <a class="list-group-item" href="{{ um.url }}">{{ um.username|safe }}</a>
<div class="panel-body"> {% endfor %}
<p>List of members of this group</p> {% for gm in group.group_member.all %}
</div> <a class="list-group-item" href="{{ gm.url }}">{{ gm.name|safe }}</a>
<ul class="list-group"> {% endfor %}
{% for um in group.user_member.all %} </ul>
<a class="list-group-item" href="{{ um.url }}"
>{{ um.username|safe }}</a
>
{% endfor %}
{% for gm in group.group_member.all %}
<a class="list-group-item" href="{{ gm.url }}">{{ gm.name|safe }}</a>
{% endfor %}
</ul>
</div> </div>
<p></p> <p></p>
<div class="panel panel-default"> <div class="panel panel-default">
<div <div id="package-panel" style="font-size:2rem;height: 46px" class="panel-heading">Packages</div>
id="package-panel" <div class="panel-body">
style="font-size:2rem;height: 46px" <p>Packages where this group has access to</p>
class="panel-heading" </div>
> <ul class="list-group">
Packages {% for p in packages %}
</div> <a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a>
<div class="panel-body"> {% endfor %}
<p>Packages where this group has access to</p> </ul>
</div>
<ul class="list-group">
{% for p in packages %}
<a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a>
{% endfor %}
</ul>
</div> </div>
</div> </div>
{% endblock content %} {% endblock content %}

14
templates/objects/model.html
View File

@ -67,7 +67,7 @@
> >
</h4> </h4>
</div> </div>
<div id="rule-package" class="panel-collapse in collapse"> <div id="rule-package" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
{% for p in model.rule_packages.all %} {% for p in model.rule_packages.all %}
<a class="list-group-item" href="{{ p.url }}" <a class="list-group-item" href="{{ p.url }}"
@ -91,7 +91,7 @@
> >
</h4> </h4>
</div> </div>
<div id="reaction-package" class="panel-collapse in collapse"> <div id="reaction-package" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
{% for p in model.data_packages.all %} {% for p in model.data_packages.all %}
<a class="list-group-item" href="{{ p.url }}" <a class="list-group-item" href="{{ p.url }}"
@ -116,7 +116,7 @@
> >
</h4> </h4>
</div> </div>
<div id="eval-package" class="panel-collapse in collapse"> <div id="eval-package" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
{% for p in model.eval_packages.all %} {% for p in model.eval_packages.all %}
<a class="list-group-item" href="{{ p.url }}" <a class="list-group-item" href="{{ p.url }}"
@ -141,7 +141,7 @@
> >
</h4> </h4>
</div> </div>
<div id="model-status" class="panel-collapse in collapse"> <div id="model-status" class="panel-collapse collapse in">
<div class="panel-body list-group-item">{{ model.status }}</div> <div class="panel-body list-group-item">{{ model.status }}</div>
</div> </div>
{% endif %} {% endif %}
@ -161,7 +161,7 @@
> >
</h4> </h4>
</div> </div>
<div id="predict-smiles" class="panel-collapse in collapse"> <div id="predict-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
<div class="input-group"> <div class="input-group">
<input <input
@ -203,7 +203,7 @@
> >
</h4> </h4>
</div> </div>
<div id="app-domain-assessment" class="panel-collapse in collapse"> <div id="app-domain-assessment" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
<div class="input-group"> <div class="input-group">
<input <input
@ -245,7 +245,7 @@
> >
</h4> </h4>
</div> </div>
<div id="sg-curve" class="panel-collapse in collapse"> <div id="sg-curve" class="panel-collapse collapse in">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
<!-- Center container contents --> <!-- Center container contents -->
<div <div

260
templates/objects/node.html
View File

@ -2,174 +2,120 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_node_modal.html" %} {% include "modals/objects/edit_node_modal.html" %}
{% include "modals/objects/generic_set_aliases_modal.html" %} {% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %} {% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="node-detail"> <div class="panel-group" id="node-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ node.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ node.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/node.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button" <div class="panel-body">
aria-haspopup="true" The underlying structure can be found <a href="{{ node.default_node_label.url }}">here</a>.
aria-expanded="false" </div>
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/node.html" %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
The underlying structure can be found
<a href="{{ node.default_node_label.url }}">here</a>.
</div>
<!-- Description --> <!-- Description -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="node-desc-link" data-toggle="collapse" data-parent="#node-detail"
> href="#node-desc">Description</a>
<h4 class="panel-title"> </h4>
<a </div>
id="node-desc-link" <div id="node-desc" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#node-detail" {{ node.description|safe }}
href="#node-desc" </div>
>Description</a </div>
>
</h4>
</div>
<div id="node-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ node.description|safe }}
</div>
</div>
{% if node.aliases %} {% if node.aliases %}
<!-- Aliases --> <!-- Aliases -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="node-aliases-link" data-toggle="collapse" data-parent="#node-detail"
> href="#node-aliases">Aliases</a>
<h4 class="panel-title"> </h4>
<a </div>
id="node-aliases-link" <div id="node-aliases" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#node-detail" {% for alias in node.aliases %}
href="#node-aliases" <a class="list-group-item">{{ alias }}</a>
>Aliases</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div id="node-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in node.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Image --> <!-- Image -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="node-image-link" data-toggle="collapse" data-parent="#node-detail"
> href="#node-image">Image Representation</a>
<h4 class="panel-title"> </h4>
<a </div>
id="node-image-link" <div id="node-image" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#node-detail" <div id="image-div" align="center">
href="#node-image" {{ node.default_node_label.as_svg|safe }}
>Image Representation</a </div>
> </div>
</h4> </div>
</div>
<div id="node-image" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ node.default_node_label.as_svg|safe }}
</div>
</div>
</div>
<!-- SMILES --> <!-- SMILES -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="node-smiles-link" data-toggle="collapse" data-parent="#node-detail"
> href="#node-smiles">SMILES Representation</a>
<h4 class="panel-title"> </h4>
<a </div>
id="node-smiles-link" <div id="node-smiles" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#node-detail" {{ node.default_node_label.smiles }}
href="#node-smiles" </div>
>SMILES Representation</a </div>
>
</h4>
</div>
<div id="node-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ node.default_node_label.smiles }}
</div>
</div>
{% if node.scenarios.all %} {% if node.scenarios.all %}
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item" <h4 class="panel-title">
style="background-color:silver" <a id="node-scenario-link" data-toggle="collapse" data-parent="#node-detail"
> href="#node-scenario">Scenarios</a>
<h4 class="panel-title"> </h4>
<a </div>
id="node-scenario-link" <div id="node-scenario" class="panel-collapse collapse in">
data-toggle="collapse" <div class="panel-body list-group-item">
data-parent="#node-detail" {% for s in node.scenarios.all %}
href="#node-scenario" <a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
>Scenarios</a {% endfor %}
> </div>
</h4> </div>
</div> {% endif %}
<div id="node-scenario" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for s in node.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if app_domain_assessment_data %} {% if app_domain_assessment_data %}
<div id="appDomainAssessmentResultTable"></div> <div id="appDomainAssessmentResultTable"></div>
{# prettier-ignore-start #}
<script> <script>
$(document).ready(function () { $(document).ready(function () {
handleAssessmentResponse("{% url 'depict' %}", {{ app_domain_assessment_data|safe }}) handleAssessmentResponse("{% url 'depict' %}", {{ app_domain_assessment_data|safe }})
}) })
</script> </script>
{# prettier-ignore-end #} {% endif %}
{% endif %}
</div>
</div> </div>
</div>
{% endblock content %} {% endblock content %}

107
templates/objects/package.html
View File

@ -2,78 +2,57 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_package_modal.html" %} {% include "modals/objects/edit_package_modal.html" %}
{% include "modals/objects/edit_package_permissions_modal.html" %} {% include "modals/objects/edit_package_permissions_modal.html" %}
{% include "modals/objects/publish_package_modal.html" %} {% include "modals/objects/publish_package_modal.html" %}
{% include "modals/objects/set_license_modal.html" %} {% include "modals/objects/set_license_modal.html" %}
{% include "modals/objects/export_package_modal.html" %} {% include "modals/objects/export_package_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="package-detail"> <div class="panel-group" id="package-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ package.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ package.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/package.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/package.html" %}
{% endblock %}
</ul>
</div> </div>
</div> <div class="panel-body">
<div class="panel-body"> <p> {{ package.description|safe }} </p>
<p>{{ package.description|safe }}</p> </div>
</div> <ul class="list-group">
<ul class="list-group"> <li class="list-group-item">
<li class="list-group-item"> <a href="{{ package.url }}/pathway">Pathways ({{ package.pathways.count }})</a>
<a href="{{ package.url }}/pathway" </li>
>Pathways ({{ package.pathways.count }})</a <li class="list-group-item">
> <a href="{{ package.url }}/rule">Rules ({{ package.rules.count }})</a>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<a href="{{ package.url }}/rule">Rules ({{ package.rules.count }})</a> <a href="{{ package.url }}/compound">Compounds ({{ package.compounds.count }})</a>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<a href="{{ package.url }}/compound" <a href="{{ package.url }}/reaction">Reactions ({{ package.reactions.count }})</a>
>Compounds ({{ package.compounds.count }})</a </li>
> <li class="list-group-item">
</li> <a href="{{ package.url }}/model">Models ({{ package.models.count }})</a>
<li class="list-group-item"> </li>
<a href="{{ package.url }}/reaction" <li class="list-group-item">
>Reactions ({{ package.reactions.count }})</a <a href="{{ package.url }}/scenario">Scenarios ({{ package.scenarios.count }})</a>
> </li>
</li> </ul>
<li class="list-group-item">
<a href="{{ package.url }}/model"
>Models ({{ package.models.count }})</a
>
</li>
<li class="list-group-item">
<a href="{{ package.url }}/scenario"
>Scenarios ({{ package.scenarios.count }})</a
>
</li>
</ul>
</div> </div>
</div>
</div>
{% endblock content %} {% endblock content %}

738
templates/objects/pathway.html
View File

@ -1,449 +1,338 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
#vizdiv {
width: 100%;
height: 600px;
background: white;
}
#pwsvg { <script src="https://d3js.org/d3.v7.min.js"></script>
width: 100%; <style>
height: 100%; #vizdiv {
color: red; width: 100%;
} height: 600px;
background: white;
}
.link { #pwsvg {
stroke: #999; width: 100%;
stroke-opacity: 0.6; height: 100%;
} color: red;
}
.link_no_arrow { .link {
stroke: #999; stroke: #999;
stroke-opacity: 0.6; stroke-opacity: 0.6;
} //marker-end: url(#arrow);
}
.node image { .link_no_arrow {
cursor: pointer; stroke: #999;
} stroke-opacity: 0.6;
}
.node circle { .node image {
fill: lightblue; cursor: pointer;
stroke: steelblue; }
stroke-width: 1.5px;
}
.inside_app_domain { .node circle {
fill: green; fill: lightblue;
stroke: green; stroke: steelblue;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.outside_app_domain { .inside_app_domain {
fill: red; fill: green;
stroke: red; stroke: green;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.passes_app_domain { .outside_app_domain {
stroke: green; fill: red;
stroke-width: 1.5px; stroke: red;
stroke-opacity: 0.6; stroke-width: 1.5px;
} }
.fails_app_domain { .passes_app_domain {
stroke: red; stroke: green;
stroke-width: 1.5px; stroke-width: 1.5px;
stroke-opacity: 0.6; stroke-opacity: 0.6;
} }
.highlighted { .fails_app_domain {
stroke: red; stroke: red;
stroke-width: 3px; stroke-width: 1.5px;
} stroke-opacity: 0.6;
}
.tooltip {
position: absolute;
background: lightgrey;
padding: 5px;
border-radius: 5px;
visibility: hidden;
opacity: 1;
}
</style>
<script src="{% static 'js/pw.js' %}"></script>
{% block action_modals %} .highlighted {
{% include "modals/objects/add_pathway_node_modal.html" %} stroke: red;
{% include "modals/objects/add_pathway_edge_modal.html" %} stroke-width: 3px;
{% include "modals/objects/download_pathway_csv_modal.html" %} }
{% include "modals/objects/download_pathway_image_modal.html" %}
{% include "modals/objects/identify_missing_rules_modal.html" %}
{% include "modals/objects/generic_copy_object_modal.html" %}
{% include "modals/objects/edit_pathway_modal.html" %}
{% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/delete_pathway_node_modal.html" %}
{% include "modals/objects/delete_pathway_edge_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %}
<p></p> .tooltip {
<div id="pwcontent"> position: absolute;
<div class="panel-group" id="pwAccordion"> background: lightgrey;
<div class="panel panel-default"> padding: 5px;
<div border-radius: 5px;
class="panel-heading" visibility: hidden;
id="headingPanel" opacity: 1
style="font-size:2rem;height: 46px" }
> </style>
{{ pathway.name|safe }} <script src="{% static 'js/pw.js' %}"></script>
</div>
</div>
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="vizLink"
data-toggle="collapse"
data-parent="#pwAccordion"
href="#viz"
>
Graphical Representation
</a>
</h4>
</div>
<div id="viz" class="panel-collapse in collapse">
<nav role="navigation" class="navbar navbar-default" style="margin: 0;">
<div class="navbar-header"></div>
<div id="editbarCollapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown requiresWritePerm">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<span class="glyphicon glyphicon-edit"></span>
Edit
<span class="caret"></span
></a>
<ul id="editingList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/pathway.html" %}
{% endblock %}
</ul>
</li>
{% if pathway.setting.model.app_domain %}
<li class="dropdown">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<span class="glyphicon glyphicon-eye-open"></span>
View
<span class="caret"></span
></a>
<ul id="editingList" class="dropdown-menu">
<li>
<a class="button" id="app-domain-toggle-button">
<i
id="app-domain-toggle-button"
class="glyphicon glyphicon-eye-open"
></i>
App Domain View</a
>
</li>
</ul>
</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right"> {% block action_modals %}
<li> {% include "modals/objects/add_pathway_node_modal.html" %}
<a {% include "modals/objects/add_pathway_edge_modal.html" %}
role="button" {% include "modals/objects/download_pathway_csv_modal.html" %}
data-toggle="modal" {% include "modals/objects/download_pathway_image_modal.html" %}
onclick="goFullscreen('vizdiv')" {% include "modals/objects/identify_missing_rules_modal.html" %}
> {% include "modals/objects/generic_copy_object_modal.html" %}
<span class="glyphicon glyphicon-fullscreen"></span> {% include "modals/objects/edit_pathway_modal.html" %}
Fullscreen {% include "modals/objects/generic_set_aliases_modal.html" %}
</a> {% include "modals/objects/generic_set_scenario_modal.html" %}
</li> {% include "modals/objects/delete_pathway_node_modal.html" %}
<li> {% include "modals/objects/delete_pathway_edge_modal.html" %}
{% if pathway.completed %} {% include "modals/objects/generic_delete_modal.html" %}
<button {% endblock action_modals %}
type="button"
class="btn btn-default navbar-btn"
data-toggle="popover"
id="status"
data-original-title=""
title=""
data-content="Pathway prediction complete."
>
<span class="glyphicon glyphicon-ok"></span>
</button>
{% elif pathway.failed %}
<button
type="button"
class="btn btn-default navbar-btn"
data-toggle="popover"
id="status"
data-original-title=""
title=""
data-content="Pathway prediction failed."
>
<span class="glyphicon glyphicon-remove"></span>
</button>
{% else %}
<button
type="button"
class="btn btn-default navbar-btn"
data-toggle="popover"
id="status"
data-original-title=""
title=""
data-content="Pathway prediction running."
>
<img height="20" src="{% static '/images/wait.gif' %}" />
</button>
{% endif %}
&nbsp;
</li>
</ul>
</div>
</nav>
<div id="vizdiv">
<svg id="pwsvg">
<defs>
<marker
id="arrow"
viewBox="0 0 10 10"
refX="43"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
markerUnits="userSpaceOnUse"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
</marker>
<marker
id="arrow_passes_app_domain"
viewBox="0 0 10 10"
refX="43"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
markerUnits="userSpaceOnUse"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="green" />
</marker>
<marker
id="arrow_fails_app_domain"
viewBox="0 0 10 10"
refX="43"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
markerUnits="userSpaceOnUse"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<g id="zoomable"></g>
</svg>
<div id="tooltip" class="tooltip"></div>
</div>
</div>
<!-- Description -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="DescriptionLink"
data-toggle="collapse"
data-parent="#pathwayAccordion"
href="#Description"
>Description</a
>
</h4>
</div>
<div id="Description" class="panel-collapse in collapse">
<div class="panel-body list-group-item" id="DescriptionContent">
{{ pathway.description | safe }}
</div>
</div>
{% if pathway.aliases %} <p></p>
<!-- Aliases --> <div id="pwcontent">
<div <div class="panel-group" id="pwAccordion">
class="panel panel-default panel-heading list-group-item" <div class="panel panel-default">
style="background-color:silver" <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
> {{ pathway.name|safe }}
<h4 class="panel-title"> </div>
<a </div>
id="pathway-aliases-link" <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
data-toggle="collapse" <h4 class="panel-title">
data-parent="#pathway-detail" <a id="vizLink" data-toggle="collapse" data-parent="#pwAccordion" href="#viz">
href="#pathway-aliases" Graphical Representation
>Aliases</a </a>
> </h4>
</h4> </div>
</div> <div id="viz" class="panel-collapse collapse in">
<div id="pathway-aliases" class="panel-collapse in collapse"> <nav role="navigation" class="navbar navbar-default" style="margin: 0;">
<div class="panel-body list-group-item"> <div class="navbar-header">
{% for alias in pathway.aliases %} </div>
<a class="list-group-item">{{ alias }}</a> <div id="editbarCollapse" class="collapse navbar-collapse ">
{% endfor %} <ul class="nav navbar-nav">
</div> <li class="dropdown requiresWritePerm">
</div> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{% endif %} aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-edit"></span>
Edit
<span class="caret"></span></a>
<ul id="editingList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/pathway.html" %}
{% endblock %}
</ul>
</li>
{% if pathway.setting.model.app_domain %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-eye-open"></span>
View
<span class="caret"></span></a>
<ul id="editingList" class="dropdown-menu">
<li>
<a class="button" id="app-domain-toggle-button">
<i id="app-domain-toggle-button" class="glyphicon glyphicon-eye-open"></i> App Domain View</a>
</li>
</ul>
</li>
{% endif %}
</ul>
{% if pathway.scenarios.all %} <ul class="nav navbar-nav navbar-right">
<div <li>
class="panel panel-default panel-heading list-group-item" <a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
style="background-color:silver" <span class="glyphicon glyphicon-fullscreen"></span>
> Fullscreen
<h4 class="panel-title">
<a
id="pathway-scenario-link"
data-toggle="collapse"
data-parent="#pathway-detail"
href="#pathway-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="pathway-scenario" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for s in pathway.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if pathway.setting %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="pathwaySettingLink"
data-toggle="collapse"
data-parent="#pathwayAccordion"
href="#pathwaySetting"
>Setting</a
>
</h4>
</div>
<div id="pathwaySetting" class="panel-collapse collapse">
<div class="panel-body list-group-item" id="pathwaySettingContent">
<table class="table-bordered table-hover table">
<tr style="background-color: rgba(0, 0, 0, 0.08);">
<th scope="col" width="20%">Parameter</th>
<th scope="col" width="80%">Value</th>
</tr>
<tbody>
{% if pathway.setting.model %}
<tr>
<td width="20%">Model</td>
<td width="80%">
<table
width="100%"
class="table-bordered table-hover table"
>
<tbody>
<tr>
<td colspan="2">
<li class="list-group-item">
<a href="{{ pathway.setting.model.url }}">
{{ pathway.setting.model.name|safe }}
</a> </a>
</li> </li>
</td> <li>
</tr> {% if pathway.completed %}
<tr> <button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
<th width="20%">Model Parameter</th> id="status" data-original-title="" title=""
<th width="80%">Parameter Value</th> data-content="Pathway prediction complete.">
</tr> <span class="glyphicon glyphicon-ok"></span>
<tr> </button>
<td width="20%">Threshold</td> {% elif pathway.failed %}
<td width="80%"> <button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
{{ pathway.setting.model_threshold }} id="status" data-original-title="" title=""
</td> data-content="Pathway prediction failed.">
</tr> <span class="glyphicon glyphicon-remove"></span>
</tbody> </button>
</table> {% else %}
</td> <button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
</tr> id="status" data-original-title="" title=""
{% endif %} data-content="Pathway prediction running.">
{% if pathway.setting.rule_packages.all %} <img height="20" src="{% static '/images/wait.gif' %}">
<tr> </button>
<td width="20%">Rule Packages</td> {% endif %}
<td width="80%"> &nbsp;
<table </li>
width="100%" </ul>
class="table-bordered table-hover table"
> </div>
<tbody> </nav>
<tr> <div id="vizdiv" >
<td colspan="2"> <svg id="pwsvg">
{% for p in pathway.setting.rule_packages.all %} <defs>
<li class="list-group-item"> <marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
<a href="{{ p.url }}"> {{ p.name|safe }} </a> orient="auto-start-reverse" markerUnits="userSpaceOnUse">
</li> <path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
{% endfor %} </marker>
</td> <marker id="arrow_passes_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
</tr> orient="auto-start-reverse" markerUnits="userSpaceOnUse">
</tbody> <path d="M 0 0 L 10 5 L 0 10 z" fill="green"/>
</table> </marker>
</td> <marker id="arrow_fails_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
</tr> orient="auto-start-reverse" markerUnits="userSpaceOnUse">
{% endif %} <path d="M 0 0 L 10 5 L 0 10 z" fill="red"/>
<tr> </marker>
<td> </defs>
<p>Max Nodes</p> <g id="zoomable"></g>
</td> </svg>
<td> <div id="tooltip" class="tooltip"></div>
<p>{{ pathway.setting.max_nodes }}</p> </div>
</td> </div>
</tr> <!-- Description -->
<tr> <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<td> <h4 class="panel-title">
<p>Max Depth</p> <a id="DescriptionLink" data-toggle="collapse" data-parent="#pathwayAccordion"
</td> href="#Description">Description</a></h4>
<td> </div>
<p>{{ pathway.setting.max_depth }}</p> <div id="Description" class="panel-collapse collapse in">
</td> <div class="panel-body list-group-item" id="DescriptionContent">
</tr> {{ pathway.description | safe }}
</tbody> </div>
</table> </div>
</div>
{% if pathway.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="pathway-aliases-link" data-toggle="collapse" data-parent="#pathway-detail"
href="#pathway-aliases">Aliases</a>
</h4>
</div>
<div id="pathway-aliases" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for alias in pathway.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %}
{% if pathway.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="pathway-scenario-link" data-toggle="collapse" data-parent="#pathway-detail"
href="#pathway-scenario">Scenarios</a>
</h4>
</div>
<div id="pathway-scenario" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for s in pathway.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
{% endfor %}
</div>
</div>
{% endif %}
{% if pathway.setting %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="pathwaySettingLink" data-toggle="collapse" data-parent="#pathwayAccordion"
href="#pathwaySetting">Setting</a></h4>
</div>
<div id="pathwaySetting" class="panel-collapse collapse">
<div class="panel-body list-group-item" id="pathwaySettingContent">
<table class="table table-bordered table-hover">
<tr style="background-color: rgba(0, 0, 0, 0.08);">
<th scope="col" width="20%">Parameter</th>
<th scope="col" width="80%">Value</th>
</tr>
<tbody>
{% if pathway.setting.model %}
<tr>
<td width="20%">Model</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<tbody>
<tr>
<td colspan="2">
<li class="list-group-item">
<a href="{{ pathway.setting.model.url }}">
{{ pathway.setting.model.name|safe }}
</a>
</li>
</td>
</tr>
<tr>
<th width="20%">Model Parameter</th>
<th width="80%">Parameter Value</th>
</tr>
<tr>
<td width="20%">
Threshold
</td>
<td width="80%">
{{ pathway.setting.model_threshold }}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{% endif %}
{% if pathway.setting.rule_packages.all %}
<tr>
<td width="20%">Rule Packages</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<tbody>
<tr>
<td colspan="2">
{% for p in pathway.setting.rule_packages.all %}
<li class="list-group-item">
<a href="{{ p.url }}">
{{ p.name|safe }}
</a>
</li>
{% endfor %}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{% endif %}
<tr>
<td>
<p>Max Nodes</p>
</td>
<td>
<p>{{ pathway.setting.max_nodes }}</p>
</td>
</tr>
<tr>
<td>
<p>Max Depth</p>
</td>
<td>
<p>{{ pathway.setting.max_depth }}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endif %}
</div> </div>
{% endif %}
</div> </div>
</div>
{# prettier-ignore-start #}
<script> <script>
// Global switch for app domain view // Global switch for app domain view
var appDomainViewEnabled = false; var appDomainViewEnabled = false;
@ -566,5 +455,4 @@
}); });
</script> </script>
{# prettier-ignore-end #}
{% endblock content %} {% endblock content %}

Some files were not shown because too many files have changed in this diff Show More