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

Compare commits

base: jebus:1a2c9bb543a0fba7d2ceca082686b9ecfc3abde2
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:refactor/html_formatting
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

2 Commits
1a2c9bb543 ... refactor/h

Author SHA1 Message Date
Tim Lorsbach
53fc91acf5 mrg 2025-11-12 10:27:17 +01:00
Tobias O
34aed2c7aa refactor: large scale formatting/linting 2025-11-12 15:51:13 +13:00
114 changed files with 10684 additions and 7009 deletions
Expand all files Collapse all files

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

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

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,4 +1,5 @@
<li>
<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>

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

@ -1,6 +1,7 @@
{% if meta.can_edit and meta.enabled_features.MODEL_BUILDING %}
<li>
<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>
{% endif %}

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,12 +1,20 @@
<li>
<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>
<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>
<a role="button" data-toggle="modal" data-target="#import_legacy_package_modal">
<span class="glyphicon glyphicon-import"></span> Import Package from legacy JSON</a>
<a
role="button"
data-toggle="modal"
data-target="#import_legacy_package_modal"
>
<span class="glyphicon glyphicon-import"></span> Import Package from legacy
JSON</a
>
</li>

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,6 +1,7 @@
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,32 +1,43 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<a role="button" data-toggle="modal" data-target="#add_structure_modal">
<i class="glyphicon glyphicon-plus"></i> Add Structure</a>
<i class="glyphicon glyphicon-plus"></i> Add Structure</a
>
</li>
<li>
<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>
<a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
<i class="glyphicon glyphicon-plus"></i> Set External Reference</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>
{% endif %}
<li>
<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>
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

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

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

@ -1,14 +1,17 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Edge</a>
<i class="glyphicon glyphicon-trash"></i> Delete Edge</a
>
</li>
{% endif %}

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

@ -1,10 +1,12 @@
{% if meta.can_edit %}
<li>
<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>
<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 %}

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

@ -1,18 +1,22 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<a role="button" data-toggle="modal" data-target="#retrain_model_modal">
<i class="glyphicon glyphicon-repeat"></i> Retrain Model</a>
<i class="glyphicon glyphicon-repeat"></i> Retrain Model</a
>
</li>
<li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Model</a>
<i class="glyphicon glyphicon-trash"></i> Delete Model</a
>
</li>
{% endif %}

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

@ -1,18 +1,22 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<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>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Node</a>
<i class="glyphicon glyphicon-trash"></i> Delete Node</a
>
</li>
{% endif %}

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

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

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

@ -1,43 +1,65 @@
{% if meta.can_edit %}
<li>
<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>
<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>
{% endif %}
<li>
<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>
<a class="button" data-toggle="modal" data-target="#download_pathway_csv_modal">
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a>
<a
class="button"
data-toggle="modal"
data-target="#download_pathway_csv_modal"
>
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a
>
</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>
<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 %}
<li>
<a class="button" data-toggle="modal" data-target="#identify_missing_rules_modal">
<i class="glyphicon glyphicon-question-sign"></i> Identify Missing Rules</a>
<a
class="button"
data-toggle="modal"
data-target="#identify_missing_rules_modal"
>
<i class="glyphicon glyphicon-question-sign"></i> Identify Missing
Rules</a
>
</li>
<li role="separator" class="divider"></li>
<li>
<a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
<i class="glyphicon glyphicon-edit"></i> Edit Pathway</a>
<i class="glyphicon glyphicon-edit"></i> Edit Pathway</a
>
</li>
<li>
<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>
<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>#}
{# <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
@ -45,15 +67,26 @@
{# </li>#}
<li role="separator" class="divider"></li>
<li>
<a class="button" data-toggle="modal" data-target="#delete_pathway_node_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
<a
class="button"
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>
<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>
<i class="glyphicon glyphicon-trash"></i> Delete Pathway</a
>
</li>
{% endif %}

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

@ -1,28 +1,38 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<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>
<a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal">
<i class="glyphicon glyphicon-plus"></i> Set External Reference</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>
{% endif %}
<li>
<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>
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

@ -1,24 +1,29 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<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>
{% endif %}
<li>
<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>
{% if meta.can_edit %}
<li>
<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>
{% endif %}

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

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

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

@ -1,15 +1,22 @@
{% if meta.can_edit %}
<li>
<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>
<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>
<a role="button" data-toggle="modal" data-target="#new_prediction_setting_modal">
<i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a>
<a
role="button"
data-toggle="modal"
data-target="#new_prediction_setting_modal"
>
<i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a
>
</li>
{# <li>#}
{# <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#}
@ -17,6 +24,7 @@
{# </li>#}
<li>
<a role="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Account</a>
<i class="glyphicon glyphicon-trash"></i> Delete Account</a
>
</li>
{% endif %}

30
templates/admin.html
View File

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

35
templates/collections/joblog.html
View File

@ -1,30 +1,37 @@
{% extends "framework.html" %}
{% load static %}
{% 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">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
Jobs
</div>
<div class="panel-body">
<p>
Job Logs Desc
</p>
<p>Job Logs Desc</p>
</div>
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="job-accordion-link" data-toggle="collapse" data-parent="#job-accordion" href="#jobs">
<a
id="job-accordion-link"
data-toggle="collapse"
data-parent="#job-accordion"
href="#jobs"
>
Jobs
</a>
</h4>
</div>
<div id="jobs"
class="panel-collapse collapse in">
<div id="jobs" class="panel-collapse in collapse">
<div class="panel-body list-group-item" id="job-content">
<table class="table table-bordered table-hover">
<table class="table-bordered table-hover table">
<tr style="background-color: rgba(0, 0, 0, 0.08);">
<th scope="col">ID</th>
<th scope="col">Name</th>
@ -56,10 +63,12 @@
</div>
<!-- Unreviewable objects such as User / Group / Setting -->
<ul class='list-group'>
<ul class="list-group">
{% for obj in objects %}
{% if object_type == 'user' %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
<a class="list-group-item" href="{{ obj.url }}"
>{{ obj.username }}</a
>
{% else %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
{% endif %}

307
templates/collections/objects_list.html
View File

@ -6,14 +6,22 @@
<div>
<div id="load-all-error" style="display: none;">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span
class="glyphicon glyphicon-exclamation-sign"
aria-hidden="true"
></span>
<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;">
<input
type="text"
id="object-search"
class="form-control"
placeholder="Search by name"
style="display: none;"
/>
<p></p>
</div>
{% endif %}
@ -50,7 +58,11 @@
<div class="panel-group" id="reviewListAccordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{% if object_type == 'package' %}
Packages
{% elif object_type == 'compound' %}
@ -78,12 +90,21 @@
{% elif object_type == 'group' %}
Groups
{% endif %}
<div id="actionsButton"
<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>
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' %}
@ -118,93 +139,204 @@
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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">
<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>
<a
id="ReviewedLink"
data-toggle="collapse"
data-parent="#reviewListAccordion"
href="#Reviewed"
>Reviewed</a
>
</h4>
</div>
<div id="Reviewed" class="panel-collapse collapse in">
<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">
<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">
<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 %}
@ -214,18 +346,36 @@
{% 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 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 {% 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' %}
{% for obj in unreviewed_objects %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name|safe }}</a>
<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>
<a class="list-group-item" href="{{ obj.url }}"
>{{ obj.name|safe }}</a
>
{% endfor %}
{% endif %}
</div>
@ -233,12 +383,16 @@
{% endif %}
{% if objects %}
<!-- Unreviewable objects such as User / Group / Setting -->
<ul class='list-group'>
<ul class="list-group">
{% for obj in objects %}
{% if object_type == 'user' %}
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username|safe }}</a>
<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>
<a class="list-group-item" href="{{ obj.url }}"
>{{ obj.name|safe }}</a
>
{% endif %}
{% endfor %}
</ul>
@ -261,10 +415,14 @@
</style>
<div id="load-all-loading" class="spinner-widget" style="display: none">
<img id="loading-gif" src="{% static '/images/wait.gif' %}" alt="Loading...">
<img
id="loading-gif"
src="{% static '/images/wait.gif' %}"
alt="Loading..."
/>
</div>
</div>
{# prettier-ignore-start #}
<script>
$(function () {
@ -316,4 +474,5 @@
});
</script>
{# prettier-ignore-end #}
{% endblock content %}

46
templates/compare.html
View File

@ -4,16 +4,32 @@
<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 }}"/>
<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>
{{ smiles }}
<p></p>
<img
width="400"
src="{% url 'depict' %}?smiles={{ smiles|urlencode }}"
/><br />
<p></p>
{% if rule %}
{{ smirks }}
@ -22,9 +38,7 @@
<p></p>
{{ rule.products_smarts }}
<p></p>
<div>
{{ rule.as_svg|safe }}
</div>
<div>{{ rule.as_svg|safe }}</div>
{% endif %}
<h2>Diff</h2>
{% if diff %}
@ -38,16 +52,22 @@
<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>
{{ 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>
{{ p }}<br />
<img
width="400"
src="{% url 'depict' %}?smiles={{ p|urlencode }}"
/><br />
{% endfor %}
</div>
</div>

13
templates/errors/400_bad_request.html
View File

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

13
templates/errors/403_access_denied.html
View File

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

13
templates/errors/404_not_found.html
View File

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

8
templates/errors/error.html
View File

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

7
templates/errors/user_account_inactive.html
View File

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

4
templates/framework.html
View File

@ -124,7 +124,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse collapse-framework navbar-collapse-framework"
class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
id="navbarCollapse"
>
<ul class="nav navbar-nav navbar-nav-framework">
@ -338,7 +338,7 @@
>
</div>
</div>
<div id="license" class="panel-collapse collapse in">
<div id="license" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<a target="_blank" href="{{ meta.current_package.license.link }}">
<img src="{{ meta.current_package.license.image_link }}" />

6
templates/framework_modern.html
View File

@ -80,7 +80,7 @@
{% block main_content %}
{# Breadcrumbs - outside main content, optional #}
{% if breadcrumbs %}
<div id="bread" class="max-w-7xl mx-auto px-4 py-4">
<div id="bread" class="mx-auto max-w-7xl px-4 py-4">
<div class="breadcrumbs text-sm">
<ul>
{% for elem in breadcrumbs %}
@ -113,7 +113,7 @@
{# License - inside paper if present #}
{% if meta.url_contains_package and meta.current_package.license %}
<div class="collapse collapse-arrow bg-base-200 m-8">
<div class="collapse-arrow bg-base-200 collapse m-8">
<input type="checkbox" checked />
<div class="collapse-title text-xl font-medium">License</div>
<div class="collapse-content">
@ -137,7 +137,7 @@
{# Floating Help Tab #}
{% if not public_mode %}
<div class="fixed right-0 top-1/2 -translate-y-1/2 z-50">
<div class="fixed top-1/2 right-0 z-50 -translate-y-1/2">
<a
href="https://community.envipath.org/"
target="_blank"

57
templates/migration.html
View File

@ -3,7 +3,11 @@
{% block content %}
<div class="panel-group" id="migration-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
Migration Status BT Rules
</div>
<div class="panel-body">
@ -12,33 +16,56 @@
</div>
{% for obj in results %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
{% if obj.status %}
<span class="glyphicon glyphicon-ok" aria-hidden="true"
style="float:right" data-toggle="tooltip"
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>
{% else %}
<span class="glyphicon glyphicon-remove" aria-hidden="true"
style="float:right" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Reviewed">
<span
class="glyphicon glyphicon-remove"
aria-hidden="true"
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
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>
<a
id="{{ obj.id }}-link"
data-toggle="collapse"
data-parent="#migration-detail"
href="#{{ obj.id }}"
>{{ obj.name|safe }}</a
>
</h4>
</div>
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
<div
id="{{ obj.id }}"
class="panel-collapse {% if not obj.status %}in{% endif %} collapse"
>
<div class="panel-body list-group-item">
<a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name|safe }} Migration Detail Page</a>
<a class="list-group-item" href="{{ obj.detail_url }}"
>{{ obj.name|safe }} Migration Detail Page</a
>
</div>
</div>
{% endfor %}
</div>
</div>
<script>
</script>
<script></script>
{% endblock content %}

66
templates/migration_detail.html
View File

@ -3,34 +3,68 @@
{% block content %}
<div class="panel-group" id="migration-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
Migration Status for {{ bt_rule_name }}
</div>
<div class="panel-body">
<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>
<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 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
{% if obj.status %}
<span class="glyphicon glyphicon-ok" aria-hidden="true"
style="float:right" data-toggle="tooltip"
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>
{% else %}
<span class="glyphicon glyphicon-remove" aria-hidden="true"
style="float:right" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Reviewed">
<span
class="glyphicon glyphicon-remove"
aria-hidden="true"
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
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>
<a
id="{{ obj.id }}-link"
data-toggle="collapse"
data-parent="#migration-detail"
href="#{{ obj.id }}"
>{{ obj.name|safe }}</a
>
</h4>
</div>
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
<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>
@ -39,7 +73,5 @@
</div>
</div>
<script>
</script>
<script></script>
{% endblock content %}

37
templates/modals/cite_modal.html
View File

@ -1,5 +1,11 @@
<div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div
class="modal fade bs-modal-lg"
id="citemodal"
tabindex="-1"
role="dialog"
aria-labelledby="myLargeModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@ -9,22 +15,33 @@
<ol class="list-group list-group-numbered">
<li class="list-group-item">
Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
<cite>Advancements in biotransformation pathway prediction: enhancements, datasets, and novel
functionalities in enviPath.</cite>
<a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank">J Cheminform 16, 93
(2024)</a>
<cite
>Advancements in biotransformation pathway prediction:
enhancements, datasets, and novel functionalities in
enviPath.</cite
>
<a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank"
>J Cheminform 16, 93 (2024)</a
>
</li>
<li class="list-group-item">
Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., Kramer, S., Fenner, K.
<cite>enviPath - The environmental contaminant biotransformation pathway resource</cite>
Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D.,
Kramer, S., Fenner, K.
<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
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>
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>

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

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

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

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

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

@ -1,57 +1,102 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="new_compound_modal" tabindex="-1" aria-labelledby="new_compound_modal" aria-modal="true"
role="dialog">
<div
class="modal fade bs-modal-lg"
id="new_compound_modal"
tabindex="-1"
aria-labelledby="new_compound_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">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create a new Compound</h4>
</div>
<div class="modal-body">
<form id="new_compound_modal_form" accept-charset="UTF-8" action="{% url 'package compound list' meta.current_package.uuid %}" data-remote="true" method="post">
<form
id="new_compound_modal_form"
accept-charset="UTF-8"
action="{% url 'package compound list' meta.current_package.uuid %}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="compound-name">Name</label>
<input id="compound-name" class="form-control" name="compound-name" placeholder="Name"/>
<input
id="compound-name"
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"/>
<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">
<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>
<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
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>
<button type="button" class="btn btn-primary" id="new_compound_modal_form_submit">Submit</button>
</div>
</div>
</div>
</div>
<script>
function newCompoundModalketcherToNewCompoundModalTextInput() {
$('#compound-smiles').val(this.ketcher.getSmiles());
$("#compound-smiles").val(this.ketcher.getSmiles());
}
$(function () {
$('#new_compound_ketcher').on('load', function() {
$("#new_compound_ketcher").on("load", function () {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
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
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
@ -59,20 +104,16 @@ $(function() {
};
checkKetcherReady();
})
});
$(function () {
$('#new_compound_modal_form_submit').on('click', function(e) {
$("#new_compound_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#new_compound_modal_form').submit();
$("#new_compound_modal_form").submit();
});
});
});
</script>

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

@ -1,5 +1,11 @@
<div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal"
aria-hidden="true">
<div
class="modal fade"
tabindex="-1"
id="new_group_modal"
role="dialog"
aria-labelledby="new_group_modal"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -10,25 +16,44 @@
<h4 class="modal-title">New Group</h4>
</div>
<div class="modal-body">
<p>Create new Group. You can assign users to the group once
it is created. Description can be changed after creation.</p>
<form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group"
<p>
Create new Group. You can assign users to the group once it is
created. Description can be changed after creation.
</p>
<form
id="new_group_modal_form"
accept-charset="UTF-8"
action="{{ SERVER_BASE }}/group"
data-remote="true"
method="post">
method="post"
>
{% csrf_token %}
<p>
<label for="name">Name</label>
<input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/>
<input
id="name"
type="text"
name="group-name"
class="form-control"
placeholder="Name"
/>
</p>
<p>
<label for="description">Description</label>
<input id="description" type="text" class="form-control" placeholder="Description..."
name="group-description"/>
<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>
<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>
@ -38,8 +63,8 @@
</div>
<script>
$(function () {
$('#new_group_modal_form_submit').on('click', function() {
$('#new_group_modal_form').submit();
$("#new_group_modal_form_submit").on("click", function () {
$("#new_group_modal_form").submit();
});
});
</script>

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

@ -1,6 +1,11 @@
<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
aria-hidden="true">
<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">
@ -11,29 +16,52 @@
<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">
<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 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"/>
<input
id="model-name"
name="model-name"
class="form-control"
placeholder="Name"
/>
<!-- Description -->
<label for="model-description">Description</label>
<input id="model-description" name="model-description" class="form-control"
placeholder="Description"/>
<input
id="model-description"
name="model-description"
class="form-control"
placeholder="Description"
/>
<!-- Model Type -->
<label for="model-type">Model Type</label>
<select id="model-type" name="model-type" class="form-control" data-width='100%'>
<select
id="model-type"
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>
@ -43,8 +71,14 @@
<!-- Rule Packages -->
<div id="rule-packages" class="ep-model-param mlrr rbrr">
<label for="model-rule-packages">Rule Packages</label>
<select id="model-rule-packages" name="model-rule-packages" data-actions-box='true'
class="form-control" multiple data-width='100%'>
<select
id="model-rule-packages"
name="model-rule-packages"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option disabled>Reviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if obj.reviewed %}
@ -64,8 +98,14 @@
<!-- Data Packages -->
<div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
<label for="model-data-packages">Data Packages</label>
<select id="model-data-packages" name="model-data-packages" data-actions-box='true'
class="form-control" multiple data-width='100%'>
<select
id="model-data-packages"
name="model-data-packages"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option disabled>Reviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if obj.reviewed %}
@ -85,11 +125,19 @@
<!-- Fingerprinter -->
<div id="fingerprinter" class="ep-model-param mlrr">
<label for="model-fingerprinter">Fingerprinter</label>
<select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
class="form-control" multiple data-width='100%'>
<select
id="model-fingerprinter"
name="model-fingerprinter"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option value="MACCS" selected>MACCS Fingerprinter</option>
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
<option disabled selected>Select Additional Fingerprinter / Descriptor</option>
<option disabled selected>
Select Additional Fingerprinter / Descriptor
</option>
{% for k, v in additional_descriptors.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
@ -100,8 +148,16 @@
<!-- Threshold -->
<div id="threshold" class="ep-model-param mlrr enviformer">
<label for="model-threshold">Threshold</label>
<input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
name="model-threshold" class="form-control">
<input
type="number"
min="0"
max="1"
step="0.05"
value="0.5"
id="model-threshold"
name="model-threshold"
class="form-control"
/>
</div>
<div id="appdomain" class="ep-model-param mlrr">
@ -109,33 +165,64 @@
<!-- Build AD? -->
<div class="checkbox">
<label>
<input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
Applicability Domain?
<input
type="checkbox"
id="build-app-domain"
name="build-app-domain"
/>Also build an Applicability Domain?
</label>
</div>
<div id="ad-params" style="display:none">
<!-- Num Neighbors -->
<label for="num-neighbors">Number of Neighbors</label>
<input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
value="5"
step="1" min="0" max="10">
<!-- Local Compatibility -->
<label for="local-compatibility-threshold">Local Compatibility Threshold</label>
<input id="local-compatibility-threshold" name="local-compatibility-threshold"
<input
id="num-neighbors"
name="num-neighbors"
type="number"
class="form-control" value="0.5" step="0.01" min="0" max="1">
class="form-control"
value="5"
step="1"
min="0"
max="10"
/>
<!-- Local Compatibility -->
<label for="local-compatibility-threshold"
>Local Compatibility Threshold</label
>
<input
id="local-compatibility-threshold"
name="local-compatibility-threshold"
type="number"
class="form-control"
value="0.5"
step="0.01"
min="0"
max="1"
/>
<!-- Reliability -->
<label for="reliability-threshold">Reliability Threshold</label>
<input id="reliability-threshold" name="reliability-threshold" type="number"
class="form-control" value="0.5" step="0.01" min="0" max="1">
<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>
<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>
@ -144,45 +231,40 @@
<script>
$(function () {
// 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-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();
$("#ad-params").show();
} else {
$('#ad-params').hide();
$("#ad-params").hide();
}
});
// On change hide all and show only selected
$("#model-type").change(function () {
$('.ep-model-param').hide();
var modelType = $('#model-type').val();
$(".ep-model-param").hide();
var modelType = $("#model-type").val();
if (nativeModelTypes.indexOf(modelType) !== -1) {
$('.' + modelType).show();
$("." + modelType).show();
} else {
// do nothing
}
});
$('#new_model_modal_form_submit').on('click', function (e) {
$("#new_model_modal_form_submit").on("click", function (e) {
e.preventDefault();
$('#new_model_form').submit();
$("#new_model_form").submit();
});
});
</script>

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

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

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

@ -1,40 +1,57 @@
{% load static %}
<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
aria-hidden="true" style="overflow-y: auto;">
<div
class="modal fade"
tabindex="-1"
id="new_pathway_modal"
role="dialog"
aria-labelledby="new_pathway_modal"
aria-hidden="true"
style="overflow-y: auto;"
>
<!-- FIXME: make width dynamic-->
<div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span> <span class="sr-only">Close</span>
<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 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.
You are currently logged in as Anonymous. Please note: Pathways
entered or predicted as anonymous user will be deleted after 30
days. Please log in to save your results.
</div>
{% endif %}
</div>
<div class="row">
<div class="col-md-6">
<label for="name">Name</label>
<input id="name" class="form-control" name="name" placeholder="Name"/>
<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"/>
<input
id="description"
class="form-control"
name="description"
placeholder="no description"
/>
</div>
<div class="col-md-6">
@ -42,17 +59,33 @@
<div class="radio" id="predict">
<p>
<label>
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict pathway
<input
type="radio"
name="predict"
id="radioPredict"
value="predict"
checked
/>Predict pathway
</label>
</p>
<p>
<label>
<input type="radio" name="predict" id="radioIncremental"value="incremental"/>Incremental prediction
<input
type="radio"
name="predict"
id="radioIncremental"
value="incremental"
/>Incremental prediction
</label>
</p>
<p>
<label>
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
<input
type="radio"
name="predict"
id="radioBuild"
value="build"
/>Build pathway
</label>
</p>
</div>
@ -61,13 +94,18 @@
<label for="smilesinput">SMILES</label>
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 90%;">
<col span="1" style="width: 10%;">
<col span="1" style="width: 90%;" />
<col span="1" style="width: 10%;" />
</colgroup>
<tr>
<td>
<input id="smilesinput" class="form-control" name="smilesinput" placeholder="C1CCCCC1"
autocapitalize="none"/>
<input
id="smilesinput"
class="form-control"
name="smilesinput"
placeholder="C1CCCCC1"
autocapitalize="none"
/>
</td>
<td>
<button type="button" class="btn btn-default" id="render-button">
@ -78,33 +116,57 @@
</table>
<p id="ketcher_container"></p>
<div>
<iframe id="ifKetcher" src="{% static '/js/ketcher/ketcher.html' %}" width="850"
height="510"></iframe>
<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
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/>
<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"/>
<input
type="radio"
name="existing"
id="radioExists"
value="exisiting"
/>
Select Existing
</label>
</p>
<p>
<label>
<input type="radio" name="existing" id="radioNew" value="temporary"/>
<input
type="radio"
name="existing"
id="radioNew"
value="temporary"
/>
Create New
</label>
</p>
@ -122,12 +184,25 @@
{% 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>
<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>
@ -136,86 +211,86 @@
<script>
s = new Setting(
'settingName',
'package_multi_select',
'modelSelect',
'cutoff',
'evalType',
'availableTS',
'forms',
'truncatorTable',
'summaryTable',
"settingName",
"package_multi_select",
"modelSelect",
"cutoff",
"evalType",
"availableTS",
"forms",
"truncatorTable",
"summaryTable",
);
$(function () {
// hide all forms
$('#forms').children().hide()
$("#forms").children().hide();
$("#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
$('#smilesinput').on('input', function() {
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
$("#smilesinput").on("input", function () {
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
});
// If theres an update in ketcher sync it to textinput
setInterval(function () {
syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
syncKetcherAndTextInput("ketcher", "ifKetcher", "smilesinput");
}, 250);
$("#smilesinput").on("blur", function () {
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
});
$("#smilesinput").on("keypress", function (event) {
if (event.keyCode == 13) {
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
}
});
// Show forms depending on the selected TS
$('#availableTS').on('change', function(e) {
$("#availableTS").on("change", function (e) {
e.preventDefault();
var type = $(this).val();
// hide current content
$('#forms').children().hide()
$("#forms").children().hide();
if(type === '') {
if (type === "") {
return;
}
$('#' + type + '_form').show()
$("#" + type + "_form").show();
});
$("#modelSelect").on("change", function () {
setCutoff = function (thresh) {
$("#cutoff").val(thresh);
}
};
var modelUri = $("#modelSelect :selected").val();
fillPRCurve(modelUri, setCutoff);
});
// Add a TS to the setting
$('#add-ts-button').on('click', function(e) {
$("#add-ts-button").on("click", function (e) {
e.preventDefault();
s.addTruncator();
});
$('input[type=radio][name=predict]').change(function() {
if (this.id == 'radioBuild') {
$("input[type=radio][name=predict]").change(function () {
if (this.id == "radioBuild") {
$("#nextbutton").prop("disabled", true);
} else {
$("#nextbutton").prop("disabled", false);
}
});
$('input[type=radio][name=existing]').change(function() {
if (this.id == 'radioDefault' || this.id == 'radioExists') {
if(this.id == 'radioDefault') {
$("input[type=radio][name=existing]").change(function () {
if (this.id == "radioDefault" || this.id == "radioExists") {
if (this.id == "radioDefault") {
$("#settingSelect").prop("disabled", true);
} else {
$("#settingSelect").prop("disabled", false);
@ -231,72 +306,71 @@ $(function() {
var pwStep1 = function () {
console.log("pw step 1");
// Make "Next" to "Advanced"
$('#nextbutton').val("Advanced");
}
$("#nextbutton").val("Advanced");
};
var pwStep2 = function () {
console.log("pw step 2");
// Make "Advanced" to "Next"
$('#nextbutton').val("Next");
$("#nextbutton").val("Next");
// As "Use default is preselected" disable "Next" button
$("#nextbutton").prop("disabled", true);
// Disable setting dropdown as long as the correspndonding radio isnt checked
$("#settingSelect").prop("disabled", true);
// Show submit button
$("#modal-form-submit").show();
}
};
var settingStep1 = function () {
// First step sets name and packages
s.extractName();
s.extractSelectedPackages();
}
};
var settingStep2 = function () {
// Seconds step gathers relative reasoning params
s.extractRelativeReasoning();
s.extractCutoff();
s.extractEvaluationType();
}
};
var settingStep3 = function () {
s.updateTable();
s.updateSummaryTable();
// hide duplicate submit...
$("#nextbutton").hide();
}
};
var postPathway = function () {
console.log("Complete!");
console.log(s.tsParams);
console.log("Getting SMILES");
}
};
function dummy() {
console.log("dummy");
}
$('#new_pathway_modal').modalSteps({
btnCancelHtml: 'Cancel',
btnPreviousHtml: 'Back',
btnNextHtml: 'Next',
btnLastStepHtml: 'Submit',
$("#new_pathway_modal").modalSteps({
btnCancelHtml: "Cancel",
btnPreviousHtml: "Back",
btnNextHtml: "Next",
btnLastStepHtml: "Submit",
disableNextButton: false,
completeCallback: postPathway,
callbacks: {
'1': pwStep1,
'2' : pwStep2,
'3' : dummy,
'4' : settingStep1,
'5' : settingStep2,
'6' : settingStep3,
}
1: pwStep1,
2: pwStep2,
3: dummy,
4: settingStep1,
5: settingStep2,
6: settingStep3,
},
});
$('#modal-form-submit').on('click', function() {
$("#modal-form-submit").on("click", function () {
e.preventDefault();
postPathway();
});
});
</script>

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

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

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

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

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

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

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

@ -1,5 +1,11 @@
<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_modal"
aria-hidden="true">
<div
class="modal fade"
tabindex="-1"
id="new_scenario_modal"
role="dialog"
aria-labelledby="new_scenario_modal"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@ -10,39 +16,84 @@
<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">
<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 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"/>
<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"/>
<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" %}">
<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" >
<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">
<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%'>
<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>
@ -56,12 +107,15 @@
{% 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>
<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>
@ -79,24 +133,21 @@
$("div[id$='-specific-inputs']").each(function () {
$(this).hide();
});
val = $('option:selected', this).val();
val = $("option:selected", this).val();
$("#" + val + "-specific-inputs").show();
});
$('#new_scenario_modal_form_submit').on('click', function (e) {
$("#new_scenario_modal_form_submit").on("click", function (e) {
e.preventDefault();
$('#new_scenario_form').submit();
$("#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" %};
dateYear.value = new Date().getFullYear();
}
});
});
</script>

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

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

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

@ -1,95 +1,150 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
<div
class="modal fade bs-modal-lg"
id="add_pathway_edge_modal"
tabindex="-1"
aria-labelledby="add_pathway_edge_modal"
aria-modal="true"
role="dialog">
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">
<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"
<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">
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"/>
<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"/>
<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-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%'>
<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>
<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;">
<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%'>
<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>
<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 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
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>
<button type="button" class="btn btn-primary" id="add_pathway_edge_modal_form_submit">Submit</button>
</div>
</div>
</div>
</div>
<script>
function reactionImage() {
var substrates = [];
$('#add_pathway_edge_substrates option:selected').each(function () {
var smiles = $(this).data('smiles'); // read data-smiles attribute
$("#add_pathway_edge_substrates option:selected").each(function () {
var smiles = $(this).data("smiles"); // read data-smiles attribute
substrates.push(smiles);
});
var products = []
$('#add_pathway_edge_products option:selected').each(function () {
var smiles = $(this).data('smiles'); // read data-smiles attribute
var products = [];
$("#add_pathway_edge_products option:selected").each(function () {
var smiles = $(this).data("smiles"); // read data-smiles attribute
products.push(smiles);
});
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) +"'>"
reaction = substrates.join(".") + ">>" + products.join(".");
$("#reaction_image").empty();
$("#reaction_image").append(
"<img width='100%' src='{% url 'depict' %}?smirks=" +
encodeURIComponent(reaction) +
"'>",
);
}
}
@ -98,30 +153,22 @@
$("#add_pathway_edge_substrates").selectpicker();
$("#add_pathway_edge_products").selectpicker();
$("#add_pathway_edge_substrates").on('change', function (e) {
$("#add_pathway_edge_substrates").on("change", function (e) {
reactionImage();
})
});
$("#add_pathway_edge_products").on('change', function (e) {
$("#add_pathway_edge_products").on("change", function (e) {
reactionImage();
})
});
$(function () {
$('#add_pathway_edge_modal_form_submit').on('click', function (e) {
$("#add_pathway_edge_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#add_pathway_edge_modal_form').submit();
$("#add_pathway_edge_modal_form").submit();
});
});
});
</script>

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

@ -1,57 +1,102 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="add_pathway_node_modal" tabindex="-1" aria-labelledby="add_pathway_node_modal" aria-modal="true"
role="dialog">
<div
class="modal fade bs-modal-lg"
id="add_pathway_node_modal"
tabindex="-1"
aria-labelledby="add_pathway_node_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">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Add a Node</h4>
</div>
<div class="modal-body">
<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">
<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"
>
{% csrf_token %}
<label for="node-name">Name</label>
<input id="node-name" class="form-control" name="node-name" placeholder="Name"/>
<input
id="node-name"
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"/>
<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">
<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>
<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
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>
<button type="button" class="btn btn-primary" id="add_pathway_node_modal_form_submit">Submit</button>
</div>
</div>
</div>
</div>
<script>
function newStructureModalketcherToNewStructureModalTextInput() {
$('#node-smiles').val(this.ketcher.getSmiles());
$("#node-smiles").val(this.ketcher.getSmiles());
}
$(function () {
$('#add_node_ketcher').on('load', function() {
$("#add_node_ketcher").on("load", function () {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
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
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
@ -59,20 +104,16 @@ $(function() {
};
checkKetcherReady();
})
});
$(function () {
$('#add_pathway_node_modal_form_submit').on('click', function(e) {
$("#add_pathway_node_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#add_pathway_node_modal_form').submit();
$("#add_pathway_node_modal_form").submit();
});
});
});
</script>

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

@ -1,57 +1,102 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="add_structure_modal" tabindex="-1" aria-labelledby="add_structure_modal" aria-modal="true"
role="dialog">
<div
class="modal fade bs-modal-lg"
id="add_structure_modal"
tabindex="-1"
aria-labelledby="add_structure_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">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create a new Structure</h4>
</div>
<div class="modal-body">
<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">
<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"
>
{% csrf_token %}
<label for="structure-name">Name</label>
<input id="structure-name" class="form-control" name="structure-name" placeholder="Name"/>
<input
id="structure-name"
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"/>
<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">
<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>
<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
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>
<button type="button" class="btn btn-primary" id="add_structure_modal_form_submit">Submit</button>
</div>
</div>
</div>
</div>
<script>
function newStructureModalketcherToNewStructureModalTextInput() {
$('#structure-smiles').val(this.ketcher.getSmiles());
$("#structure-smiles").val(this.ketcher.getSmiles());
}
$(function () {
$('#add_structure_ketcher').on('load', function() {
$("#add_structure_ketcher").on("load", function () {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
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
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
@ -59,20 +104,16 @@ $(function() {
};
checkKetcherReady();
})
});
$(function () {
$('#add_structure_modal_form_submit').on('click', function(e) {
$("#add_structure_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#add_structure_modal_form').submit();
$("#add_structure_modal_form").submit();
});
});
});
</script>

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

@ -1,4 +1,3 @@
{% load static %}
<!-- Delete Edge -->
<div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
@ -6,19 +5,36 @@
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete Edge</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deletes the Edge. Nodes referenced by this edge will remain.
<p></p>
<form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true"
method="post">
<form
id="delete-pathway-edge-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<select id="delete_pathway_edge_edges" name="edge-url"
data-actions-box='true' class="form-control" data-width='100%'>
<option value="" disabled selected>Select Reaction to delete</option>
<select
id="delete_pathway_edge_edges"
name="edge-url"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<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 %}
@ -29,8 +45,16 @@
<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>
<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>
@ -39,28 +63,27 @@
$(function () {
$("#delete_pathway_edge_edges").selectpicker();
$("#delete_pathway_edge_edges").on('change', function (e) {
edge_url = $('#delete_pathway_edge_edges option:selected').val()
$("#delete_pathway_edge_edges").on("change", function (e) {
edge_url = $("#delete_pathway_edge_edges option:selected").val();
if (edge_url !== "") {
$('#delete_pathway_edge_image').empty();
$('#delete_pathway_edge_image').append(
"<img width='100%' src='" + edge_url + "?image=svg'>"
$("#delete_pathway_edge_image").empty();
$("#delete_pathway_edge_image").append(
"<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();
edge_url = $('#delete_pathway_edge_edges option:selected').val()
edge_url = $("#delete_pathway_edge_edges option:selected").val();
if (edge_url === "") {
return;
}
$('#delete-pathway-edge-modal-form').attr('action', edge_url)
$('#delete-pathway-edge-modal-form').submit();
$("#delete-pathway-edge-modal-form").attr("action", edge_url);
$("#delete-pathway-edge-modal-form").submit();
});
});
})
</script>

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

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

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

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

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

@ -5,7 +5,12 @@
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Download Pathway as Image</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
@ -13,20 +18,26 @@
By clicking on Download the Pathway will be saved as SVG.
</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>
<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>
<script>
$(function () {
$('#download-pathway-image-modal-submit').click(function (e) {
$("#download-pathway-image-modal-submit").click(function (e) {
e.preventDefault();
downloadSVG($('#pwsvg')[0], '{{ pathway.name.split|join:"_" }}.svg')
$('#download_pathway_image_modal').modal('hide');
downloadSVG($("#pwsvg")[0], '{{ pathway.name.split|join:"_" }}.svg');
$("#download_pathway_image_modal").modal("hide");
});
});
})
</script>

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

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

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

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

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

@ -1,4 +1,3 @@
{% load static %}
<!-- Edit Package Permission -->
<div id="edit_group_member_modal" class="modal" tabindex="-1">
@ -6,15 +5,20 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add or Remove Group Member</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button
type="button"
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 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>
@ -28,12 +32,24 @@
</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">
<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%'>
<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>
@ -43,10 +59,9 @@
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" name="action" value="add">
</div>
<div class="col-xs-2">
<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>
@ -57,16 +72,22 @@
<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">
<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">
<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>
@ -78,16 +99,22 @@
<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">
<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">
<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>
@ -96,26 +123,29 @@
</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>
<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>
<script>
$(function () {
$('#edit-package-modal-submit').click(function(e){
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault();
$('#edit-package-modal-form').submit();
$("#edit-package-modal-form").submit();
});
$("#select_member").selectpicker();
})
});
</script>

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

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

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

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

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

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

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

@ -1,4 +1,3 @@
{% load static %}
<!-- Edit Package Permission -->
<div id="edit_package_permissions_modal" class="modal" tabindex="-1">
@ -6,16 +5,23 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Grant or Revoke Permissions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button
type="button"
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>
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>
@ -35,12 +41,24 @@
</div>
<div class="row">
<form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
data-remote="true" method="post">
<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%'>
<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>
@ -61,7 +79,11 @@
<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">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
@ -70,24 +92,50 @@
<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">
<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 %}/>
<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 %}/>
<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 %}/>
<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">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
@ -97,58 +145,93 @@
<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">
<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 }}"/>
<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 %}/>
<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 %}/>
<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 %}/>
<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">
<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>
<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>
<script>
function checkboxClick() {
// id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da
parts = this.id.split('_');
parts = this.id.split("_");
perm = parts[0];
id = parts[1];
readbox = '#read_' + id;
writebox = '#write_' + id;
ownerbox = '#owner_' + id;
readbox = "#read_" + id;
writebox = "#write_" + id;
ownerbox = "#owner_" + id;
if (perm == 'read' && !$(readbox).prop("checked")) {
if (perm == "read" && !$(readbox).prop("checked")) {
$(writebox).prop("checked", false);
$(ownerbox).prop("checked", false);
}
if (perm == 'write') {
if (perm == "write") {
if ($(writebox).prop("checked")) {
$(readbox).prop("checked", true);
}
@ -157,7 +240,7 @@ function checkboxClick() {
}
}
if (perm == 'owner') {
if (perm == "owner") {
if ($(ownerbox).prop("checked")) {
$(readbox).prop("checked", true);
$(writebox).prop("checked", true);
@ -166,18 +249,16 @@ function checkboxClick() {
}
$(function () {
$('#edit-package-modal-submit').click(function(e){
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault();
$('#edit-package-modal-form').submit();
$("#edit-package-modal-form").submit();
});
$("#select_grantee").selectpicker();
// Add click functions to permission checkboxes
$('[id^="read_"]').on('click', checkboxClick);
$('[id^="write_"]').on('click', checkboxClick);
$('[id^="owner_"]').on('click', checkboxClick);
})
$('[id^="read_"]').on("click", checkboxClick);
$('[id^="write_"]').on("click", checkboxClick);
$('[id^="owner_"]').on("click", checkboxClick);
});
</script>

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

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

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

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

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

@ -5,18 +5,31 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Prediction Setting</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button
type="button"
class="close"
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">
<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 collapse in">
<div id="prediction-setting" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<table class="table table-bordered table-hover">
<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>
@ -26,13 +39,26 @@
<tr>
<td width="20%">Model</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<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%'>
<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>
<option
value="{{ m.id }}"
{% if user.prediction_settings.model.url == m.url %}selected{% endif %}
>
{{ m.name|safe }}
</option>
{% endfor %}
</select>
</td>
@ -50,8 +76,15 @@
</td>
<td width="80%">
{% if k == 'threshold' %}
<input type="number" class="form-control" name="{{k}}" value="{{v}}"
min="0" max="1" step="0.05">
<input
type="number"
class="form-control"
name="{{ k }}"
value="{{ v }}"
min="0"
max="1"
step="0.05"
/>
{% endif %}
</td>
</tr>
@ -63,22 +96,40 @@
{% endif %}
{% for k, v in user.prediction_settings.truncator.items %}
<tr>
<td><p>
<td>
<p>
{% if k == 'max_nodes' %}
Max Nodes
{% elif k == 'max_depth' %}
Max Depth
{% endif %}
</p></td>
<td><p>
</p>
</td>
<td>
<p>
{% if k == 'max_nodes' %}
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
max="50" step="1">
<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">
<input
type="number"
class="form-control"
name="{{ k }}"
value="{{ v }}"
min="1"
max="8"
step="1"
/>
{% endif %}
</p></td>
</p>
</td>
</tr>
{% endfor %}
</tbody>
@ -88,19 +139,25 @@
</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>
<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>
<script>
$(function () {
$('#edit-prediction-setting-modal-submit').click(function(e){
$("#edit-prediction-setting-modal-submit").click(function (e) {
e.preventDefault();
$('#edit-prediction-setting-modal-form').submit();
$("#edit-prediction-setting-modal-form").submit();
});
});
})
</script>

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

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

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

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

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

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

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

@ -1,6 +1,11 @@
<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal"
aria-hidden="true">
<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">
@ -11,17 +16,29 @@
<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">
<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.
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%'>
<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 %}
@ -39,35 +56,38 @@
<!-- Eval Type -->
<label for="model-evaluation-type">Evaluation Type</label>
<select id="model-evaluation-type" name="model-evaluation-type" class="form-control">
<select
id="model-evaluation-type"
name="model-evaluation-type"
class="form-control"
>
<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">
<input type="hidden" name="hidden" value="evaluate" />
</form>
</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>
<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>
<script>
$(function () {
$("#model-evaluation-packages").selectpicker();
$('#evaluate_model_form_submit').on('click', function (e) {
$("#evaluate_model_form_submit").on("click", function (e) {
e.preventDefault();
$('#evaluate_model_form').submit();
$("#evaluate_model_form").submit();
});
});
</script>

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

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

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

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

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

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

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

@ -1,4 +1,3 @@
{% load static %}
<style>
@ -48,66 +47,110 @@
}
</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 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">
<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>
<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">
<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>
<span class="alias"
>{{ alias|escape }}<span class="remove">&times;</span></span
>
{% endfor %}
<input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
<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
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>
<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;
if (aliasText === "") return;
// Avoid duplicate aliass
var exists = false;
$('#alias-box .alias').each(function () {
if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
$("#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() +
var aliasHtml =
'<span class="alias">' +
$("<div>").text(aliasText).html() +
'<span class="remove">&times;</span></span>';
$(aliasHtml).insertBefore('#alias-input');
$(aliasHtml).insertBefore("#alias-input");
}
$('#alias-input').val('');
$("#alias-input").val("");
}
// Add alias when Enter is pressed
$('#alias-input').on('keypress', function (e) {
$("#alias-input").on("keypress", function (e) {
if (e.which === 13) {
e.preventDefault();
addAlias($(this).val());
@ -115,56 +158,56 @@
});
// Add alias when input loses focus
$('#alias-input').on('blur', function () {
$("#alias-input").on("blur", function () {
var val = $(this).val();
if (val.trim() !== '') {
if (val.trim() !== "") {
addAlias(val);
}
});
// Remove alias when clicking ×
$('#alias-box').on('click', '.remove', function () {
$(this).closest('.alias').remove();
$("#alias-box").on("click", ".remove", function () {
$(this).closest(".alias").remove();
});
// Focus input when clicking the container
$('#alias-box').on('click', function () {
$('#alias-input').focus();
$("#alias-box").on("click", function () {
$("#alias-input").focus();
});
$('#set_aliases_modal_form_submit').on('click', function (e) {
$("#set_aliases_modal_form_submit").on("click", function (e) {
e.preventDefault();
let aliases = [];
$('#alias-box .alias').each(function () {
aliases.push($(this).text().replace('×', '').trim())
$("#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 = ['']
aliases = [""];
}
formData = {
'aliases': aliases
}
aliases: aliases,
};
$.ajax({
type: 'post',
type: "post",
data: formData,
url: '{{ current_object.url }}',
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-error-message").append(
"<p>Setting aliases failed!</p>",
);
$("#add-alias-error-message").show();
},
});
});
});
</script>

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

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

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

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

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

@ -5,18 +5,33 @@
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Identify Missing Rules</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download we'll search the Pathway for Reactions that are not backed by
a Rule or which can be assembled by chaining two rules.
<form id="identify-missing-rules-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
data-remote="true" method="GET">
By clicking on Download we'll search the Pathway for Reactions that are
not backed by a Rule or which can be assembled by chaining two rules.
<form
id="identify-missing-rules-modal-form"
accept-charset="UTF-8"
action="{{ pathway.url }}"
data-remote="true"
method="GET"
>
<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%'>
<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 %}
@ -35,20 +50,26 @@
</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="identify-missing-rules-modal-submit">Download</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button
type="button"
class="btn btn-primary"
id="identify-missing-rules-modal-submit"
>
Download
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#identify-missing-rules-modal-submit').click(function (e) {
$("#identify-missing-rules-modal-submit").click(function (e) {
e.preventDefault();
$('#identify-missing-rules-modal-form').submit();
$('#identify_missing_rules_modal').modal('hide');
$("#identify-missing-rules-modal-form").submit();
$("#identify_missing_rules_modal").modal("hide");
});
});
})
</script>

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

@ -1,35 +1,52 @@
<div class="modal fade"
<div
class="modal fade"
tabindex="-1"
id="manage_api_token_modal"
role="dialog"
aria-labelledby="manage_api_token_modal"
aria-hidden="true">
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3 class="modal-title">Manage API Token</h3>
</div>
<div class="modal-body">
<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>
<form id="request_api_token_form"
<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>
<form
id="request_api_token_form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post">
method="post"
>
{% csrf_token %}
<p>
<label for="token-name">Name</label>
<input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
<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>
<input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
<input type="hidden" name="hidden" value="request-api-token">
<input
type="number"
id="valid-for"
class="form-control"
name="valid-for"
value="90"
/>
<input type="hidden" name="hidden" value="request-api-token" />
</p>
</form>
<div id="new-token">
@ -37,12 +54,23 @@
</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">
<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>
<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>
@ -52,12 +80,11 @@
</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
<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>
@ -65,15 +92,15 @@
</div>
<script>
$(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();
const formData = $('#request_api_token_form').serialize();
$.post('', formData, function(response) {
$('#new-token-pre').text(response.raw_token);
$('#new-token').show();
const formData = $("#request_api_token_form").serialize();
$.post("", formData, function (response) {
$("#new-token-pre").text(response.raw_token);
$("#new-token").show();
});
});
@ -87,6 +114,5 @@ $(function() {
form.remove();
});
});
});
</script>

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

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

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

@ -1,15 +1,15 @@
<div class="modal fade"
<div
class="modal fade"
tabindex="-1"
id="set_license_modal"
role="dialog"
aria-labelledby="set_license_modal"
aria-hidden="true">
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
@ -21,48 +21,99 @@
<div class="col-md-9">
<p>
Set the license for all data in this package:
<br> <br>
(For more information please visit our <a target="#"
href="https://wiki.envipath.org/index.php/License">wiki</a>.)
<br />
<br />
(For more information please visit our
<a target="#" href="https://wiki.envipath.org/index.php/License"
>wiki</a
>.)
</p>
</div>
<div class="col-md-3">
<div id="ccfig"></div>
</div>
</div>
<form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post">
<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>
<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>
<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>
<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>
<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>
<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">
<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>
<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>
<script>
function ccstring(ccremix, ccnocom, ccalike) {
var ccstring = "by";
@ -81,41 +132,41 @@ function ccstring(ccremix, ccnocom, ccalike){
}
function cc() {
var nocc = $('#noccradio').prop('checked')
var iscc = $('#ccradio').prop('checked');
var nocc = $("#noccradio").prop("checked");
var iscc = $("#ccradio").prop("checked");
if (nocc) {
$('#ccradio').prop('checked', false);
$('#ccremix').prop('checked', false);
$('#ccnocom').prop('checked', false);
$('#ccalike').prop('checked', false);
$("#ccradio").prop("checked", false);
$("#ccremix").prop("checked", false);
$("#ccnocom").prop("checked", false);
$("#ccalike").prop("checked", false);
$('#ccremix').prop('disabled', true);
$('#ccnocom').prop('disabled', true);
$('#ccalike').prop('disabled', true);
$("#ccremix").prop("disabled", true);
$("#ccnocom").prop("disabled", true);
$("#ccalike").prop("disabled", true);
} else if (iscc) {
$('#ccremix').prop('disabled', false);
$('#ccnocom').prop('disabled', false);
$("#ccremix").prop("disabled", false);
$("#ccnocom").prop("disabled", false);
if ($('#ccremix').prop('checked')) {
$('#ccalike').prop('disabled', false);
if ($("#ccremix").prop("checked")) {
$("#ccalike").prop("disabled", false);
} else {
$('#ccalike').prop('disabled', true);
$("#ccalike").prop("disabled", true);
}
}
var remix = $('#ccremix').prop('checked');
var nocom = $('#ccnocom').prop('checked');
var alike = $('#ccalike').prop('checked');
var remix = $("#ccremix").prop("checked");
var nocom = $("#ccnocom").prop("checked");
var alike = $("#ccalike").prop("checked");
if (nocc) {
$('#set_license_form_submit').prop('disabled', false);
$('#ccfig').empty();
$('#license').val('no-license')
$("#set_license_form_submit").prop("disabled", false);
$("#ccfig").empty();
$("#license").val("no-license");
} else if (iscc) {
$('#set_license_form_submit').prop('disabled', false);
$('#ccfig').empty();
var ccstr = ccstring(remix, nocom, alike)
$("#set_license_form_submit").prop("disabled", false);
$("#ccfig").empty();
var ccstr = ccstring(remix, nocom, alike);
var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
@ -124,26 +175,24 @@ function cc() {
<img src='${imageLink}'>
</a>`;
$('#ccfig').append(img_tpl);
$('#license').val(ccstr);
$("#ccfig").append(img_tpl);
$("#license").val(ccstr);
} else {
$('#ccfig').empty();
$('#set_license_form_submit').prop('disabled', true);
$('#license').val('no-license')
$("#ccfig").empty();
$("#set_license_form_submit").prop("disabled", true);
$("#license").val("no-license");
}
}
$(function () {
// Disable by default as nothing is selected
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();
$('#set_license_form').submit();
$("#set_license_form").submit();
});
});
</script>

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

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

127
templates/modals/predict_modal.html
View File

@ -1,94 +1,157 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="predict_modal" tabindex="-1" aria-labelledby="predict_modal" aria-modal="true"
role="dialog">
<div
class="modal fade bs-modal-lg"
id="predict_modal"
tabindex="-1"
aria-labelledby="predict_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">
<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">
<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"/>
<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"/>
<input
id="description"
class="form-control"
name="description"
placeholder="Description"
/>
</div>
<div class="col-md-6">
<label for="predict">Predict pathway or build yourself?</label>
<div class="radio" id="predict">
<p>
<label>
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict
pathway
<input
type="radio"
name="predict"
id="radioPredict"
value="predict"
checked
/>Predict pathway
</label>
</p>
<p>
<label>
<input type="radio" name="predict" id="radioIncremental" value="incremental"/>Incremental
prediction
<input
type="radio"
name="predict"
id="radioIncremental"
value="incremental"
/>Incremental prediction
</label>
</p>
<p>
<label>
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
<input
type="radio"
name="predict"
id="radioBuild"
value="build"
/>Build pathway
</label>
</p>
</div>
</div>
</div>
<label for="predict-modal-smiles">SMILES</label>
<input type="text" class="form-control" name="smiles" placeholder="SMILES" id="predict-modal-smiles">
<input
type="text"
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>
<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>
<select id="prediction-setting" name="prediction-setting" class="form-control"
data-width='100%'>
<select
id="prediction-setting"
name="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 }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
<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>
{% endfor %}
</select>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
<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>
<button type="button" class="btn btn-primary" id="predictButton">Predict</button>
</div>
</div>
</div>
</div>
<script>
function predictModalketcherToPredictModalTextInput() {
$('#predict-modal-smiles').val(this.ketcher.getSmiles());
$("#predict-modal-smiles").val(this.ketcher.getSmiles());
}
$(function () {
$('#predict-modal-ketcher').on('load', function() {
$("#predict-modal-ketcher").on("load", function () {
const checkKetcherReady = () => {
win = this.contentWindow
if (win.ketcher && 'editor' in win.ketcher) {
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
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
@ -96,9 +159,9 @@ $(function() {
};
checkKetcherReady();
})
});
$('#predictButton').on('click', function(e) {
$("#predictButton").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
@ -109,7 +172,7 @@ $(function() {
// existing pws...
// submit form
$('#predict_modal_form').submit();
$("#predict_modal_form").submit();
});
});
</script>

123
templates/objects/composite_rule.html
View File

@ -12,14 +12,27 @@
<div class="panel-group" id="rule-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ rule.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/rule.html" %}
@ -28,20 +41,26 @@
</div>
</div>
<div class="panel-body">
<p>
{{ rule.description|safe }}
</p>
<p>{{ rule.description|safe }}</p>
</div>
{% if rule.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 collapse in">
<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>
@ -51,20 +70,26 @@
{% endif %}
<!-- Reaction Patterns -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 collapse in">
<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>
<p>{{ r.as_svg|safe }}</p>
</div>
{% endfor %}
</div>
@ -72,16 +97,26 @@
<!-- Scenarios -->
{% if rule.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -89,31 +124,49 @@
{% if rule.enzymelinks %}
<!-- EC Numbers -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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">
<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"
<a
id="{{ k|slugify }}_Link"
data-toggle="collapse"
data-parent="#{{ k|slugify }}_Accordion"
href="#{{ k|slugify }}">
href="#{{ k|slugify }}"
>
{{ k }}
</a>
</h4>
</div>
<div id="{{ k|slugify }}" class="panel-collapse collapse in">
<div id="{{ k|slugify }}" class="panel-collapse in collapse">
<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>
<div style="position:absolute;bottom:10px;left:100px;">
{{ enzyme.name }}
</div>
<div style="float:right;">
{{ enzyme.linking_method }}
</div>
</a>
{% endfor %}
</div>

282
templates/objects/compound.html
View File

@ -14,14 +14,27 @@
<div class="panel-group" id="compound-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ compound.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/compound.html" %}
@ -31,22 +44,30 @@
</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>
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 %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="compound-aliases-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-aliases">Aliases</a>
<a
id="compound-aliases-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-aliases"
>Aliases</a
>
</h4>
</div>
<div id="compound-aliases" class="panel-collapse collapse in">
<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>
@ -56,26 +77,42 @@
{% endif %}
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 collapse in">
<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">
<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>
<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 collapse in">
<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 }}
@ -84,39 +121,63 @@
</div>
<!-- SMILES -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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">
<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>
<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 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">
<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>
<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 id="compound-inchi" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound.default_structure.inchikey }}
</div>
@ -124,16 +185,26 @@
<!-- Reactions -->
{% if compound.related_reactions %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -141,16 +212,26 @@
<!-- Pathways -->
{% if compound.related_pathways %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -158,16 +239,26 @@
<!-- Scenarios -->
{% if compound.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -175,67 +266,106 @@
<!-- External Identifiers -->
{% if compound.get_external_identifiers %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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
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">
<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"
<a
id="compound-pubchem-identifier-link"
data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-pubchem-identifier">PubChem Compound Identifier</a>
href="#compound-pubchem-identifier"
>PubChem Compound Identifier</a
>
</h4>
</div>
<div id="compound-pubchem-identifier" class="panel-collapse collapse in">
<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>
<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">
<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"
<a
id="compound-pubchem-identifier-link"
data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-pubchem-identifier">PubChem Substance Identifier</a>
href="#compound-pubchem-identifier"
>PubChem Substance Identifier</a
>
</h4>
</div>
<div id="compound-pubchem-identifier" class="panel-collapse collapse in">
<div
id="compound-pubchem-identifier"
class="panel-collapse in collapse"
>
{% for eid in compound.get_pubchem_substance_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">SID{{ eid.identifier_value }}</a>
<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">
<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"
<a
id="compound-chebi-identifier-link"
data-toggle="collapse"
data-parent="#compound-external-identifier"
href="#compound-chebi-identifier">ChEBI Identifier</a>
href="#compound-chebi-identifier"
>ChEBI Identifier</a
>
</h4>
</div>
<div id="compound-chebi-identifier" class="panel-collapse collapse in">
<div
id="compound-chebi-identifier"
class="panel-collapse in collapse"
>
{% for eid in compound.get_chebi_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">CHEBI:{{ eid.identifier_value }}</a>
<a class="list-group-item" href="{{ eid.external_url }}"
>CHEBI:{{ eid.identifier_value }}</a
>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock content %}

98
templates/objects/compound_structure.html
View File

@ -12,14 +12,27 @@
<div class="panel-group" id="compound-structure-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ compound_structure.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/compound_structure.html" %}
@ -32,13 +45,21 @@
</div>
<!-- Image -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="compound-structure-image-link" data-toggle="collapse" data-parent="#compound-structure-detail"
href="#compound-structure-image">Image Representation</a>
<a
id="compound-structure-image-link"
data-toggle="collapse"
data-parent="#compound-structure-detail"
href="#compound-structure-image"
>Image Representation</a
>
</h4>
</div>
<div id="compound-structure-image" class="panel-collapse collapse in">
<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 }}
@ -47,13 +68,21 @@
</div>
<!-- SMILES -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="compound-structure-smiles-link" data-toggle="collapse" data-parent="#compound-structure-detail"
href="#compound-structure-smiles">SMILES Representation</a>
<a
id="compound-structure-smiles-link"
data-toggle="collapse"
data-parent="#compound-structure-detail"
href="#compound-structure-smiles"
>SMILES Representation</a
>
</h4>
</div>
<div id="compound-structure-smiles" class="panel-collapse collapse in">
<div id="compound-structure-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ compound_structure.smiles }}
</div>
@ -61,13 +90,21 @@
{% if compound_structure.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="compound-structure-aliases-link" data-toggle="collapse" data-parent="#compound-structure-detail"
href="#compound-structure-aliases">Aliases</a>
<a
id="compound-structure-aliases-link"
data-toggle="collapse"
data-parent="#compound-structure-detail"
href="#compound-structure-aliases"
>Aliases</a
>
</h4>
</div>
<div id="compound-structure-aliases" class="panel-collapse collapse in">
<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>
@ -77,16 +114,29 @@
{% endif %}
{% if compound_structure.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="compound-structure-scenario-link" data-toggle="collapse" data-parent="#compound-structure-detail"
href="#compound-structure-scenario">Scenarios</a>
<a
id="compound-structure-scenario-link"
data-toggle="collapse"
data-parent="#compound-structure-detail"
href="#compound-structure-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="compound-structure-scenario" class="panel-collapse collapse in">
<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>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -95,8 +145,6 @@
<!-- Reactions -->
<!-- Pathways -->
</div>
</div>
{% endblock content %}

162
templates/objects/edge.html
View File

@ -11,14 +11,27 @@
<div class="panel-group" id="edge-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ edge.edge_label.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/edge.html" %}
@ -28,13 +41,21 @@
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="edge-desc-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-desc">Description</a>
<a
id="edge-desc-link"
data-toggle="collapse"
data-parent="#edge-detail"
href="#edge-desc"
>Description</a
>
</h4>
</div>
<div id="edge-desc" class="panel-collapse collapse in">
<div id="edge-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ edge.description|safe }}
</div>
@ -42,13 +63,21 @@
{% if edge.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="edge-aliases-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-aliases">Aliases</a>
<a
id="edge-aliases-link"
data-toggle="collapse"
data-parent="#edge-detail"
href="#edge-aliases"
>Aliases</a
>
</h4>
</div>
<div id="edge-aliases" class="panel-collapse collapse in">
<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>
@ -58,13 +87,21 @@
{% endif %}
<!-- Image -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="edge-image-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-image">Image Representation</a>
<a
id="edge-image-link"
data-toggle="collapse"
data-parent="#edge-detail"
href="#edge-image"
>Image Representation</a
>
</h4>
</div>
<div id="edge-image" class="panel-collapse collapse in">
<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 }}
@ -73,33 +110,56 @@
</div>
<!-- Reaction Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="edge-description-link" data-toggle="collapse" data-parent="#edge-description-detail"
href="#edge-description-smiles">Reaction Description</a>
<a
id="edge-description-link"
data-toggle="collapse"
data-parent="#edge-description-detail"
href="#edge-description-smiles"
>Reaction Description</a
>
</h4>
</div>
<div id="edge-description-smiles" class="panel-collapse collapse in">
<div id="edge-description-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for educt in edge.start_nodes.all %}
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
<a class="btn btn-default" href="{{ educt.url }}"
>{{ educt.name|safe }}</a
>
{% endfor %}
<span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
aria-hidden="true"></span>
<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>
<a class="btn btn-default" href="{{ product.url }}"
>{{ product.name|safe }}</a
>
{% endfor %}
</div>
</div>
<!-- SMIRKS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="edge-smirks-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-smirks">SMIRKS Representation</a>
<a
id="edge-smirks-link"
data-toggle="collapse"
data-parent="#edge-detail"
href="#edge-smirks"
>SMIRKS Representation</a
>
</h4>
</div>
<div id="edge-smirks" class="panel-collapse collapse in">
<div id="edge-smirks" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ edge.edge_label.smirks }}
</div>
@ -107,36 +167,56 @@
{% if edge.edge_label.rules.all %}
<!-- Rules -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="edge-rules-link" data-toggle="collapse" data-parent="#edge-detail"
href="#edge-rules">Rules</a>
<a
id="edge-rules-link"
data-toggle="collapse"
data-parent="#edge-detail"
href="#edge-rules"
>Rules</a
>
</h4>
</div>
<div id="edge-rules" class="panel-collapse collapse in">
<div id="edge-rules" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in edge.edge_label.rules.all %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }}</a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if edge.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 collapse in">
<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>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock content %}

135
templates/objects/enzymelink.html
View File

@ -1,105 +1,164 @@
{% extends "framework.html" %}
{% 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">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ enzymelink.ec_number }}
</div>
<!-- Name -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="enzyme-name-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-name">Enzyme Name</a>
<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 collapse in">
<div class="panel-body list-group-item">
{{ enzymelink.name }}
</div>
<div id="enzyme-name" class="panel-collapse in collapse">
<div class="panel-body list-group-item">{{ enzymelink.name }}</div>
</div>
<!-- Linking Method -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="enzyme-linking-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-linking">Linking Method</a>
<a
id="enzyme-linking-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-linking"
>Linking Method</a
>
</h4>
</div>
<div id="enzyme-linking" class="panel-collapse collapse in">
<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>
href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks"
target="#"
>Learn more &gt;&gt;</a
>
</div>
</div>
{% if enzymelink.kegg_reaction_links %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="enzyme-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-evidence">Linking Evidence</a>
<a
id="enzyme-evidence-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-evidence"
>Linking Evidence</a
>
</h4>
</div>
<div id="enzyme-evidence" class="panel-collapse collapse in">
<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>
<a class="list-group-item" href="{{ kl.external_url }}"
>{{ kl.identifier_value }}</a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if enzymelink.reaction_evidence.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="enzyme-reaction-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-reaction-evidence">Linking Evidence - enviPath Reactions</a>
<a
id="enzyme-reaction-evidence-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-reaction-evidence"
>Linking Evidence - enviPath Reactions</a
>
</h4>
</div>
<div id="enzyme-reaction-evidence" class="panel-collapse collapse in">
<div id="enzyme-reaction-evidence" class="panel-collapse in collapse">
<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>
<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 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="enzyme-edge-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-edge-evidence">Linking Evidence - enviPath Pathways</a>
<a
id="enzyme-edge-evidence-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-edge-evidence"
>Linking Evidence - enviPath Pathways</a
>
</h4>
</div>
<div id="enzyme-edge-evidence" class="panel-collapse collapse in">
<div id="enzyme-edge-evidence" class="panel-collapse in collapse">
<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>
<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">
<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>
<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 id="enzyme-external-identifier" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<a class="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>
target="_blank"
>
Brenda entry for {{ enzymelink.ec_number }}</a
>
</div>
</div>
</div>
</div>
{% endblock content %}

45
templates/objects/group.html
View File

@ -10,14 +10,27 @@
<div class="panel-group" id="package-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ group.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/group.html" %}
@ -33,13 +46,21 @@
<p></p>
<div class="panel panel-default">
<div id="member-panel" style="font-size:2rem;height: 46px" class="panel-heading">Members</div>
<div
id="member-panel"
style="font-size:2rem;height: 46px"
class="panel-heading"
>
Members
</div>
<div class="panel-body">
<p>List of members of this group</p>
</div>
<ul class="list-group">
{% for um in group.user_member.all %}
<a class="list-group-item" href="{{ um.url }}">{{ um.username|safe }}</a>
<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>
@ -50,7 +71,13 @@
<p></p>
<div class="panel panel-default">
<div id="package-panel" style="font-size:2rem;height: 46px" class="panel-heading">Packages</div>
<div
id="package-panel"
style="font-size:2rem;height: 46px"
class="panel-heading"
>
Packages
</div>
<div class="panel-body">
<p>Packages where this group has access to</p>
</div>

14
templates/objects/model.html
View File

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

118
templates/objects/node.html
View File

@ -11,14 +11,27 @@
<div class="panel-group" id="node-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ node.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/node.html" %}
@ -27,17 +40,26 @@
</div>
</div>
<div class="panel-body">
The underlying structure can be found <a href="{{ node.default_node_label.url }}">here</a>.
The underlying structure can be found
<a href="{{ node.default_node_label.url }}">here</a>.
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="node-desc-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-desc">Description</a>
<a
id="node-desc-link"
data-toggle="collapse"
data-parent="#node-detail"
href="#node-desc"
>Description</a
>
</h4>
</div>
<div id="node-desc" class="panel-collapse collapse in">
<div id="node-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ node.description|safe }}
</div>
@ -45,13 +67,21 @@
{% if node.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="node-aliases-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-aliases">Aliases</a>
<a
id="node-aliases-link"
data-toggle="collapse"
data-parent="#node-detail"
href="#node-aliases"
>Aliases</a
>
</h4>
</div>
<div id="node-aliases" class="panel-collapse collapse in">
<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>
@ -61,13 +91,21 @@
{% endif %}
<!-- Image -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="node-image-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-image">Image Representation</a>
<a
id="node-image-link"
data-toggle="collapse"
data-parent="#node-detail"
href="#node-image"
>Image Representation</a
>
</h4>
</div>
<div id="node-image" class="panel-collapse collapse in">
<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 }}
@ -76,29 +114,47 @@
</div>
<!-- SMILES -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="node-smiles-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-smiles">SMILES Representation</a>
<a
id="node-smiles-link"
data-toggle="collapse"
data-parent="#node-detail"
href="#node-smiles"
>SMILES Representation</a
>
</h4>
</div>
<div id="node-smiles" class="panel-collapse collapse in">
<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 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="node-scenario-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-scenario">Scenarios</a>
<a
id="node-scenario-link"
data-toggle="collapse"
data-parent="#node-detail"
href="#node-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="node-scenario" class="panel-collapse collapse in">
<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>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -106,16 +162,14 @@
{% if app_domain_assessment_data %}
<div id="appDomainAssessmentResultTable"></div>
{# prettier-ignore-start #}
<script>
$(document).ready(function () {
handleAssessmentResponse("{% url 'depict' %}", {{ app_domain_assessment_data|safe }})
})
</script>
{# prettier-ignore-end #}
{% endif %}
</div>
</div>
{% endblock content %}

47
templates/objects/package.html
View File

@ -13,14 +13,27 @@
<div class="panel-group" id="package-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ package.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/package.html" %}
@ -33,26 +46,34 @@
</div>
<ul class="list-group">
<li class="list-group-item">
<a href="{{ package.url }}/pathway">Pathways ({{ package.pathways.count }})</a>
<a href="{{ package.url }}/pathway"
>Pathways ({{ package.pathways.count }})</a
>
</li>
<li class="list-group-item">
<a href="{{ package.url }}/rule">Rules ({{ package.rules.count }})</a>
</li>
<li class="list-group-item">
<a href="{{ package.url }}/compound">Compounds ({{ package.compounds.count }})</a>
<a href="{{ package.url }}/compound"
>Compounds ({{ package.compounds.count }})</a
>
</li>
<li class="list-group-item">
<a href="{{ package.url }}/reaction">Reactions ({{ package.reactions.count }})</a>
<a href="{{ package.url }}/reaction"
>Reactions ({{ package.reactions.count }})</a
>
</li>
<li class="list-group-item">
<a href="{{ package.url }}/model">Models ({{ package.models.count }})</a>
<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>
<a href="{{ package.url }}/scenario"
>Scenarios ({{ package.scenarios.count }})</a
>
</li>
</ul>
</div>
</div>
{% endblock content %}

234
templates/objects/pathway.html
View File

@ -1,7 +1,6 @@
{% extends "framework.html" %}
{% load static %}
{% block content %}
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
#vizdiv {
@ -19,7 +18,6 @@
.link {
stroke: #999;
stroke-opacity: 0.6;
//marker-end: url(#arrow);
}
.link_no_arrow {
@ -61,7 +59,6 @@
stroke-opacity: 0.6;
}
.highlighted {
stroke: red;
stroke-width: 3px;
@ -73,7 +70,7 @@
padding: 5px;
border-radius: 5px;
visibility: hidden;
opacity: 1
opacity: 1;
}
</style>
<script src="{% static 'js/pw.js' %}"></script>
@ -97,29 +94,47 @@
<div id="pwcontent">
<div class="panel-group" id="pwAccordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ pathway.name|safe }}
</div>
</div>
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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">
<a
id="vizLink"
data-toggle="collapse"
data-parent="#pwAccordion"
href="#viz"
>
Graphical Representation
</a>
</h4>
</div>
<div id="viz" class="panel-collapse collapse in">
<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="collapse navbar-collapse ">
<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">
<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>
<span class="caret"></span
></a>
<ul id="editingList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/pathway.html" %}
@ -128,15 +143,27 @@
</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">
<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>
<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>
<i
id="app-domain-toggle-button"
class="glyphicon glyphicon-eye-open"
></i>
App Domain View</a
>
</li>
</ul>
</li>
@ -145,50 +172,95 @@
<ul class="nav navbar-nav navbar-right">
<li>
<a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
<a
role="button"
data-toggle="modal"
onclick="goFullscreen('vizdiv')"
>
<span class="glyphicon glyphicon-fullscreen"></span>
Fullscreen
</a>
</li>
<li>
{% if pathway.completed %}
<button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
id="status" data-original-title="" title=""
data-content="Pathway prediction complete.">
<button
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.">
<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
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">
<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">
<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">
<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>
@ -198,12 +270,21 @@
</div>
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<a
id="DescriptionLink"
data-toggle="collapse"
data-parent="#pathwayAccordion"
href="#Description"
>Description</a
>
</h4>
</div>
<div id="Description" class="panel-collapse collapse in">
<div id="Description" class="panel-collapse in collapse">
<div class="panel-body list-group-item" id="DescriptionContent">
{{ pathway.description | safe }}
</div>
@ -211,13 +292,21 @@
{% if pathway.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 id="pathway-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in pathway.aliases %}
<a class="list-group-item">{{ alias }}</a>
@ -227,30 +316,49 @@
{% endif %}
{% if pathway.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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>
<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">
<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>
<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">
<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>
@ -260,7 +368,10 @@
<tr>
<td width="20%">Model</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<table
width="100%"
class="table-bordered table-hover table"
>
<tbody>
<tr>
<td colspan="2">
@ -276,9 +387,7 @@
<th width="80%">Parameter Value</th>
</tr>
<tr>
<td width="20%">
Threshold
</td>
<td width="20%">Threshold</td>
<td width="80%">
{{ pathway.setting.model_threshold }}
</td>
@ -292,15 +401,16 @@
<tr>
<td width="20%">Rule Packages</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<table
width="100%"
class="table-bordered table-hover table"
>
<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>
<a href="{{ p.url }}"> {{ p.name|safe }} </a>
</li>
{% endfor %}
</td>
@ -333,6 +443,7 @@
{% endif %}
</div>
</div>
{# prettier-ignore-start #}
<script>
// Global switch for app domain view
var appDomainViewEnabled = false;
@ -455,4 +566,5 @@
});
</script>
{# prettier-ignore-end #}
{% endblock content %}

278
templates/objects/reaction.html
View File

@ -13,14 +13,27 @@
<div class="panel-group" id="reaction-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ reaction.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/reaction.html" %}
@ -30,13 +43,21 @@
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-desc-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-desc">Description</a>
<a
id="reaction-desc-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-desc"
>Description</a
>
</h4>
</div>
<div id="reaction-desc" class="panel-collapse collapse in">
<div id="reaction-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ reaction.description|safe }}
</div>
@ -44,13 +65,21 @@
{% if reaction.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-aliases-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-aliases">Aliases</a>
<a
id="reaction-aliases-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-aliases"
>Aliases</a
>
</h4>
</div>
<div id="reaction-aliases" class="panel-collapse collapse in">
<div id="reaction-aliases" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for alias in reaction.aliases %}
<a class="list-group-item">{{ alias }}</a>
@ -60,65 +89,102 @@
{% endif %}
<!-- Image -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-image-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-image">Image Representation</a>
<a
id="reaction-image-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-image"
>Image Representation</a
>
</h4>
</div>
<div id="reaction-image" class="panel-collapse collapse in">
<div id="reaction-image" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ reaction.as_svg|safe }}
</div>
<div id="image-div" align="center">{{ reaction.as_svg|safe }}</div>
</div>
</div>
<!-- Reaction Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-description-link" data-toggle="collapse" data-parent="#reaction-description-detail"
href="#reaction-description-smiles">Reaction Description</a>
<a
id="reaction-description-link"
data-toggle="collapse"
data-parent="#reaction-description-detail"
href="#reaction-description-smiles"
>Reaction Description</a
>
</h4>
</div>
<div id="reaction-description-smiles" class="panel-collapse collapse in">
<div id="reaction-description-smiles" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for educt in reaction.educts.all %}
<a class="btn btn-default" href="{{ educt.url }}">{{ educt.name|safe }}</a>
<a class="btn btn-default" href="{{ educt.url }}"
>{{ educt.name|safe }}</a
>
{% endfor %}
<span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
aria-hidden="true"></span>
<span
class="glyphicon glyphicon-arrow-right"
style="margin-left:5em;margin-right:5em;"
aria-hidden="true"
></span>
{% for product in reaction.products.all %}
<a class="btn btn-default" href="{{ product.url }}">{{ product.name|safe }}</a>
<a class="btn btn-default" href="{{ product.url }}"
>{{ product.name|safe }}</a
>
{% endfor %}
</div>
</div>
<!-- SMIRKS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-smirks-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-smirks">SMIRKS Representation</a>
<a
id="reaction-smirks-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-smirks"
>SMIRKS Representation</a
>
</h4>
</div>
<div id="reaction-smirks" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ reaction.smirks }}
</div>
<div id="reaction-smirks" class="panel-collapse in collapse">
<div class="panel-body list-group-item">{{ reaction.smirks }}</div>
</div>
{% if reaction.rules.all %}
<!-- Rules -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-rules-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-rules">Rules</a>
<a
id="reaction-rules-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-rules"
>Rules</a
>
</h4>
</div>
<div id="reaction-rules" class="panel-collapse collapse in">
<div id="reaction-rules" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in reaction.rules.all %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }}</a
>
{% endfor %}
</div>
</div>
@ -126,16 +192,28 @@
{% if reaction.get_related_enzymes %}
<!-- EC Numbers -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 id="rule-ec-numbers" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for e in reaction.get_related_enzymes %}
<a class="list-group-item" href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ e.ec_number }}">{{ e.name }}</a>
<a
class="list-group-item"
href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ e.ec_number }}"
>{{ e.name }}</a
>
{% endfor %}
</div>
</div>
@ -143,32 +221,52 @@
{% if reaction.related_pathways %}
<!-- Pathways -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-pathway-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-pathway">Pathways</a>
<a
id="reaction-pathway-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-pathway"
>Pathways</a
>
</h4>
</div>
<div id="reaction-pathway" class="panel-collapse collapse in">
<div id="reaction-pathway" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in reaction.related_pathways %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }}</a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if reaction.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-scenario-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-scenario">Scenarios</a>
<a
id="reaction-scenario-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-scenario"
>Scenarios</a
>
</h4>
</div>
<div id="reaction-scenario" class="panel-collapse collapse in">
<div id="reaction-scenario" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for s in reaction.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a
>
{% endfor %}
</div>
</div>
@ -176,50 +274,80 @@
<!-- External Identifiers -->
{% if reaction.get_external_identifiers %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-external-identifier-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-external-identifier">External Identifier</a>
<a
id="reaction-external-identifier-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-external-identifier"
>External Identifier</a
>
</h4>
</div>
<div id="reaction-external-identifier" class="panel-collapse collapse in">
<div
id="reaction-external-identifier"
class="panel-collapse in collapse"
>
<div class="panel-body list-group-item">
{% if reaction.get_rhea_identifiers %}
<div class="panel panel-default panel-heading list-group-item"
style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-rhea-identifier-link" data-toggle="collapse"
<a
id="reaction-rhea-identifier-link"
data-toggle="collapse"
data-parent="#reaction-external-identifier"
href="#reaction-rhea-identifier">Rhea</a>
href="#reaction-rhea-identifier"
>Rhea</a
>
</h4>
</div>
<div id="reaction-rhea-identifier" class="panel-collapse collapse in">
<div
id="reaction-rhea-identifier"
class="panel-collapse in collapse"
>
{% for eid in reaction.get_rhea_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">{{ eid.identifier_value }}</a>
<a class="list-group-item" href="{{ eid.external_url }}"
>{{ eid.identifier_value }}</a
>
{% endfor %}
</div>
{% endif %}
{% if reaction.get_uniprot_identifiers %}
<div class="panel panel-default panel-heading list-group-item"
style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="reaction-uniprot-identifier-link" data-toggle="collapse"
<a
id="reaction-uniprot-identifier-link"
data-toggle="collapse"
data-parent="#reaction-external-identifier"
href="#reaction-uniprot-identifier">UniProt</a>
href="#reaction-uniprot-identifier"
>UniProt</a
>
</h4>
</div>
<div id="reaction-uniprot-identifier" class="panel-collapse collapse in">
<div
id="reaction-uniprot-identifier"
class="panel-collapse in collapse"
>
{% for eid in reaction.get_uniprot_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">10 SwissProt entries ({{ eid.identifier_value }})</a>
<a class="list-group-item" href="{{ eid.external_url }}"
>10 SwissProt entries ({{ eid.identifier_value }})</a
>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock content %}

68
templates/objects/scenario.html
View File

@ -9,14 +9,27 @@
{% endblock action_modals %}
<div class="panel-group" id="scenario-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ scenario.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/scenario.html" %}
@ -31,15 +44,18 @@
<div class="panel-heading">Description</div>
<div class="panel-body">
{{ scenario.description|safe }}
<br>
<br />
{{ scenario.scenario_type }}
<br>
<br />
Reported {{ scenario.scenario_date }}
</div>
</div>
<div class="table-responsive">
<table id="scenario-table" class="table table-bordered table-striped table-hover">
<table
id="scenario-table"
class="table-bordered table-striped table-hover table"
>
<tbody>
<tr>
<th>Property</th>
@ -57,11 +73,20 @@
<td>{{ ai.property_unit|safe }}</td>
{% if meta.can_edit %}
<td>
<form action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}" method="post">
<form
action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}"
method="post"
>
{% csrf_token %}
<input type="hidden" name="uuid" value="{{ ai.uuid }}">
<input type="hidden" name="hidden" value="delete-additional-information">
<button type="submit" class="btn"><span class="glyphicon glyphicon-minus"></span></button>
<input type="hidden" name="uuid" value="{{ ai.uuid }}" />
<input
type="hidden"
name="hidden"
value="delete-additional-information"
/>
<button type="submit" class="btn">
<span class="glyphicon glyphicon-minus"></span>
</button>
</form>
</td>
{% endif %}
@ -73,10 +98,19 @@
<td></td>
<td>Delete all</td>
<td>
<form action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}" method="post">
<form
action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}"
method="post"
>
{% csrf_token %}
<input type="hidden" name="hidden" value="delete-all-additional-information">
<button type="submit" class="btn"><span class="glyphicon glyphicon-trash"></span></button>
<input
type="hidden"
name="hidden"
value="delete-all-additional-information"
/>
<button type="submit" class="btn">
<span class="glyphicon glyphicon-trash"></span>
</button>
</form>
</td>
</tr>
@ -84,6 +118,4 @@
</tbody>
</table>
</div>
{% endblock content %}

263
templates/objects/simple_rule.html
View File

@ -12,14 +12,27 @@
<div class="panel-group" id="rule-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ rule.name|safe }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/rule.html" %}
@ -28,20 +41,26 @@
</div>
</div>
<div class="panel-body">
<p>
{{ rule.description|safe }}
</p>
<p>{{ rule.description|safe }}</p>
</div>
{% if rule.aliases %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 collapse in">
<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>
@ -51,41 +70,63 @@
{% endif %}
<!-- Representation -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-image-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-image">Image Representation</a>
<a
id="rule-image-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-image"
>Image Representation</a
>
</h4>
</div>
<div id="rule-image" class="panel-collapse collapse in">
<div id="rule-image" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ rule.as_svg|safe }}
</div>
<div id="image-div" align="center">{{ rule.as_svg|safe }}</div>
</div>
</div>
<!-- SMIRKS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-smirks-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-smirks">SMIRKS Representation</a>
<a
id="rule-smirks-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-smirks"
>SMIRKS Representation</a
>
</h4>
</div>
<div id="rule-smirks" class="panel-collapse collapse in">
<div id="rule-smirks" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<p>{{ rule.smirks }}</p>
</div>
</div>
<!-- Reactants SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-reactants-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reactants-smarts">Reactant SMARTS</a>
<a
id="rule-reactants-smarts-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-reactants-smarts"
>Reactant SMARTS</a
>
</h4>
</div>
<div id="rule-reactants-smarts" class="panel-collapse collapse in">
<div id="rule-reactants-smarts" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<p>{{ rule.reactants_smarts }}</p>
</div>
@ -93,13 +134,24 @@
<!-- Reactant Filter SMARTS -->
{% if rule.reactant_filter_smarts %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-reactant-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reactant-filter-smarts">Reactant Filter SMARTS</a>
<a
id="rule-reactant-filter-smarts-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-reactant-filter-smarts"
>Reactant Filter SMARTS</a
>
</h4>
</div>
<div id="rule-reactant-filter-smarts" class="panel-collapse collapse in">
<div
id="rule-reactant-filter-smarts"
class="panel-collapse in collapse"
>
<div class="panel-body list-group-item">
<p>{{ rule.reactant_filter_smarts }}</p>
</div>
@ -107,13 +159,21 @@
{% endif %}
<!-- Products SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-products-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-products-smarts">Reactant SMARTS</a>
<a
id="rule-products-smarts-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-products-smarts"
>Reactant SMARTS</a
>
</h4>
</div>
<div id="rule-products-smarts" class="panel-collapse collapse in">
<div id="rule-products-smarts" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<p>{{ rule.products_smarts }}</p>
</div>
@ -121,13 +181,21 @@
<!-- Product Filter SMARTS -->
{% if rule.product_filter_smarts %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-product-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-product-filter-smarts">Product Filter SMARTS</a>
<a
id="rule-product-filter-smarts-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-product-filter-smarts"
>Product Filter SMARTS</a
>
</h4>
</div>
<div id="rule-product-filter-smarts" class="panel-collapse collapse in">
<div id="rule-product-filter-smarts" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<p>{{ rule.product_filter_smarts }}</p>
</div>
@ -136,16 +204,26 @@
<!-- Included in Composite Rules -->
{% if rule.parallelrule_set.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-composite-rule-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-composite-rule">Included in Composite Rules</a>
<a
id="rule-composite-rule-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-composite-rule"
>Included in Composite Rules</a
>
</h4>
</div>
<div id="rule-composite-rule" class="panel-collapse collapse in">
<div id="rule-composite-rule" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for cr in rule.parallelrule_set.all %}
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name|safe }}</a>
<a class="list-group-item" href="{{ cr.url }}"
>{{ cr.name|safe }}</a
>
{% endfor %}
</div>
</div>
@ -153,16 +231,26 @@
<!-- Scenarios -->
{% if rule.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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 }}</a>
<a class="list-group-item" href="{{ s.url }}"
>{{ s.name|safe }}</a
>
{% endfor %}
</div>
</div>
@ -170,16 +258,26 @@
<!-- Reactions -->
{% if rule.related_reactions %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-reaction-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reaction">Reactions</a>
<a
id="rule-reaction-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-reaction"
>Reactions</a
>
</h4>
</div>
<div id="rule-reaction" class="panel-collapse collapse">
<div class="panel-body list-group-item">
{% for r in rule.related_reactions %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }}</a
>
{% endfor %}
</div>
</div>
@ -187,16 +285,26 @@
<!-- Pathways -->
{% if rule.related_pathways %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="rule-pathway-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-pathway">Pathways</a>
<a
id="rule-pathway-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-pathway"
>Pathways</a
>
</h4>
</div>
<div id="rule-pathway" class="panel-collapse collapse">
<div class="panel-body list-group-item">
{% for r in rule.related_pathways %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name|safe }}</a
>
{% endfor %}
</div>
</div>
@ -204,32 +312,49 @@
{% if rule.enzymelinks %}
<!-- EC Numbers -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<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>
<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 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">
<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"
<a
id="{{ k|slugify }}_Link"
data-toggle="collapse"
data-parent="#{{ k|slugify }}_Accordion"
href="#{{ k|slugify }}">
href="#{{ k|slugify }}"
>
{{ k }}
</a>
</h4>
</div>
<div id="{{ k|slugify }}" class="panel-collapse collapse in">
<div id="{{ k|slugify }}" class="panel-collapse in collapse">
<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>
<div style="position:absolute;bottom:10px;left:100px;">
{{ enzyme.name }}
</div>
<div style="float:right;">
{{ enzyme.linking_method }}
</div>
</a>
{% endfor %}
</div>

96
templates/objects/user.html
View File

@ -12,14 +12,27 @@
<div class="panel-group" id="user-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ user.username }}
<div id="actionsButton"
<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>
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 %}
{% include "actions/objects/user.html" %}
@ -28,33 +41,54 @@
</div>
</div>
<div class="panel-body">
<p> On this page you can modify your account or set preferences such as prediction settings.</p>
<p>
On this page you can modify your account or set preferences such as
prediction settings.
</p>
</div>
</div>
<!-- Default Package -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="default-package-link" data-toggle="collapse" data-parent="#user-detail"
href="#default-package">Default Package</a>
<a
id="default-package-link"
data-toggle="collapse"
data-parent="#user-detail"
href="#default-package"
>Default Package</a
>
</h4>
</div>
<div id="default-package" class="panel-collapse collapse in">
<div id="default-package" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<li class="list-group-item">
<a href="{{ user.default_package.url }}"> {{ user.default_package.name|safe }}</a>
<a href="{{ user.default_package.url }}">
{{ user.default_package.name|safe }}</a
>
</li>
</div>
</div>
<!-- Groups -->
{% if meta.available_groups|length > 0 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="group-links" data-toggle="collapse" data-parent="#user-detail"
href="#groups">Groups</a>
<a
id="group-links"
data-toggle="collapse"
data-parent="#user-detail"
href="#groups"
>Groups</a
>
</h4>
</div>
<div id="groups" class="panel-collapse collapse in">
<div id="groups" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for g in meta.available_groups %}
<li class="list-group-item">
@ -66,15 +100,23 @@
{% endif %}
<!-- Current Prediction Settings -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a id="current-prediction-setting-links" data-toggle="collapse" data-parent="#user-detail"
href="#current-prediction-setting">Current Prediction Setting</a>
<a
id="current-prediction-setting-links"
data-toggle="collapse"
data-parent="#user-detail"
href="#current-prediction-setting"
>Current Prediction Setting</a
>
</h4>
</div>
<div id="current-prediction-setting" class="panel-collapse collapse in">
<div id="current-prediction-setting" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
<table class="table table-bordered table-hover">
<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>
@ -84,7 +126,7 @@
<tr>
<td width="20%">Model</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<table width="100%" class="table-bordered table-hover table">
<tbody>
<tr>
<td colspan="2">
@ -100,9 +142,7 @@
<th width="80%">Parameter Value</th>
</tr>
<tr>
<td width="20%">
Threshold
</td>
<td width="20%">Threshold</td>
<td width="80%">
{{ user.default_setting.model_threshold }}
</td>
@ -116,15 +156,13 @@
<tr>
<td width="20%">Rule Packages</td>
<td width="80%">
<table width="100%" class="table table-bordered table-hover">
<table width="100%" class="table-bordered table-hover table">
<tbody>
<tr>
<td colspan="2">
{% for p in user.default_setting.rule_packages.all %}
<li class="list-group-item">
<a href="{{p.url}}">
{{ p.name|safe }}
</a>
<a href="{{ p.url }}"> {{ p.name|safe }} </a>
</li>
{% endfor %}
</td>

7
templates/pathway_playground.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<title>Title</title>
@ -9,6 +9,7 @@
<body>
<div id="viz"></div>
</body>
{# prettier-ignore-start #}
<script>
data = {
"aliases" : [ ] ,
@ -853,5 +854,5 @@ function drawGraph(pathway) {
drawGraph(data);
</script>
{# prettier-ignore-end #}
</html>

79
templates/pathway_playground2.html
View File

@ -1,29 +1,61 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Force-Directed Tree</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
svg { width: 100%; height: 600px; }
.link { stroke: #999; stroke-opacity: 0.6; marker-end: url(#arrow); }
.link_no_arrow { stroke: #999; stroke-opacity: 0.6; }
.node image { cursor: pointer; }
.node circle { fill: lightblue; stroke: steelblue; stroke-width: 1.5px; }
.highlighted { stroke: red; stroke-width: 3px; }
.tooltip { position: absolute; background: lightgray; padding: 5px; border-radius: 5px; visibility: hidden; }
svg {
width: 100%;
height: 600px;
}
.link {
stroke: #999;
stroke-opacity: 0.6;
marker-end: url(#arrow);
}
.link_no_arrow {
stroke: #999;
stroke-opacity: 0.6;
}
.node image {
cursor: pointer;
}
.node circle {
fill: lightblue;
stroke: steelblue;
stroke-width: 1.5px;
}
.highlighted {
stroke: red;
stroke-width: 3px;
}
.tooltip {
position: absolute;
background: lightgray;
padding: 5px;
border-radius: 5px;
visibility: hidden;
}
</style>
</head>
<body>
<p></p>
{{ pathway.name|safe }}
<div id="viz">
<svg width="2000" height="2000"> <!-- Sehr großes SVG für Zoom -->
<svg width="2000" height="2000">
<!-- Sehr großes SVG für Zoom -->
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<marker
id="arrow"
viewBox="0 0 10 10"
refX="43"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
</marker>
</defs>
@ -31,8 +63,9 @@
</svg>
</div>
<div id="tooltip" class="tooltip"></div>
<script>
{# prettier-ignore-start #}
<script>
function assignPositions(nodes) {
const levelSpacing = 75; // Vertikaler Abstand zwischen den Tiefen
const horizontalSpacing = 75; // Abstand zwischen Knoten auf gleicher Tiefe
@ -178,9 +211,20 @@ function nodeClick(event, node, t) {
}
</script>
{# prettier-ignore-end #}
<svg width="400" height="300">
<path d="M200,50 C200,100 150,150 150,200" stroke="black" fill="none" stroke-width="2"/>
<path d="M200,50 C200,100 250,150 250,200" stroke="black" fill="none" stroke-width="2"/>
<path
d="M200,50 C200,100 150,150 150,200"
stroke="black"
fill="none"
stroke-width="2"
/>
<path
d="M200,50 C200,100 250,150 250,200"
stroke="black"
fill="none"
stroke-width="2"
/>
<!-- Knoten -->
<circle cx="200" cy="50" r="5" fill="blue" />
@ -190,5 +234,4 @@ function nodeClick(event, node, t) {
</body>
{% load static %}
<script src="{% static 'js/pw.js' %}"></script>
</html>

3
templates/predict_pathway.html
View File

@ -135,7 +135,7 @@
</div>
</form>
</div>
{# prettier-ignore-start #}
<script>
function predictKetcherToTextInput() {
$("#predict-smiles").val(this.ketcher.getSmiles());
@ -191,4 +191,5 @@
});
});
</script>
{# prettier-ignore-end #}
{% endblock content %}

164
templates/static/about_us.html
View File

@ -2,9 +2,9 @@
{% load static %}
{% block main_content %}
<div class="max-w-4xl mx-auto px-4 py-8">
<div class="mx-auto max-w-4xl px-4 py-8">
<!-- Breadcrumbs -->
<div class="text-sm breadcrumbs mb-4">
<div class="breadcrumbs mb-4 text-sm">
<ul>
<li><a href="/">Home</a></li>
<li>About Us</li>
@ -12,119 +12,181 @@
</div>
<!-- Main Content -->
<div class="bg-base-100 shadow-xl rounded-lg p-8">
<h1 class="text-4xl font-bold mb-6">About enviPath</h1>
<div class="bg-base-100 rounded-lg p-8 shadow-xl">
<h1 class="mb-6 text-4xl font-bold">About enviPath</h1>
<div class="prose max-w-none">
<!-- Hero Image/Graphic -->
<div class="mb-8">
<img src="{% static '/images/ep-rule-artwork.png' %}" alt="enviPath System" class="w-full max-w-2xl mx-auto rounded-lg shadow-md" />
<img
src="{% static '/images/ep-rule-artwork.png' %}"
alt="enviPath System"
class="mx-auto w-full max-w-2xl rounded-lg shadow-md"
/>
</div>
<p class="text-lg mb-6">
enviPath is a comprehensive database and prediction system for the microbial biotransformation of
organic environmental contaminants. Since 2015, we have been at the forefront of computational
environmental chemistry, helping researchers understand and predict biodegradation pathways.
<p class="mb-6 text-lg">
enviPath is a comprehensive database and prediction system for the
microbial biotransformation of organic environmental contaminants.
Since 2015, we have been at the forefront of computational
environmental chemistry, helping researchers understand and predict
biodegradation pathways.
</p>
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Mission</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">Our Mission</h2>
<p class="mb-4">
Our mission is to advance environmental science through innovative computational tools that predict
and analyze the biotransformation of chemical compounds. We strive to provide researchers, regulators,
and industry professionals with accurate, accessible tools for understanding environmental fate and behavior.
Our mission is to advance environmental science through innovative
computational tools that predict and analyze the biotransformation of
chemical compounds. We strive to provide researchers, regulators, and
industry professionals with accurate, accessible tools for
understanding environmental fate and behavior.
</p>
<h2 class="text-2xl font-semibold mt-8 mb-4">What We Offer</h2>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<h2 class="mt-8 mb-4 text-2xl font-semibold">What We Offer</h2>
<div class="mb-6 grid gap-6 md:grid-cols-2">
<div class="card bg-base-200 shadow-md">
<div class="card-body">
<h3 class="card-title text-primary">Pathway Database</h3>
<p>Access experimentally observed biotransformation pathways and reactions from curated scientific literature.</p>
<p>
Access experimentally observed biotransformation pathways and
reactions from curated scientific literature.
</p>
</div>
</div>
<div class="card bg-base-200 shadow-md">
<div class="card-body">
<h3 class="card-title text-primary">Prediction System</h3>
<p>Use our relative reasoning models to predict likely biotransformation pathways and products for new compounds.</p>
<p>
Use our relative reasoning models to predict likely
biotransformation pathways and products for new compounds.
</p>
</div>
</div>
<div class="card bg-base-200 shadow-md">
<div class="card-body">
<h3 class="card-title text-primary">Machine Learning Models</h3>
<p>Leverage advanced ML algorithms trained on extensive biodegradation data for accurate predictions.</p>
<p>
Leverage advanced ML algorithms trained on extensive
biodegradation data for accurate predictions.
</p>
</div>
</div>
<div class="card bg-base-200 shadow-md">
<div class="card-body">
<h3 class="card-title text-primary">Community Platform</h3>
<p>Join our active community of researchers to share knowledge, discuss findings, and collaborate.</p>
<p>
Join our active community of researchers to share knowledge,
discuss findings, and collaborate.
</p>
</div>
</div>
</div>
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Technology</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">Our Technology</h2>
<p class="mb-4">
enviPath employs a unique combination of rule-based and machine learning approaches to predict
biotransformation pathways:
enviPath employs a unique combination of rule-based and machine
learning approaches to predict biotransformation pathways:
</p>
<ul class="list-disc list-inside mb-4 space-y-2">
<li><strong>Relative Reasoning:</strong> Uses structural similarity to known biotransformations</li>
<li><strong>Rule-Based Systems:</strong> Applies expert-curated transformation rules</li>
<li><strong>Machine Learning:</strong> Leverages neural networks for pattern recognition</li>
<li><strong>Hybrid Models:</strong> Combines multiple approaches for optimal accuracy</li>
<ul class="mb-4 list-inside list-disc space-y-2">
<li>
<strong>Relative Reasoning:</strong> Uses structural similarity to
known biotransformations
</li>
<li>
<strong>Rule-Based Systems:</strong> Applies expert-curated
transformation rules
</li>
<li>
<strong>Machine Learning:</strong> Leverages neural networks for
pattern recognition
</li>
<li>
<strong>Hybrid Models:</strong> Combines multiple approaches for
optimal accuracy
</li>
</ul>
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Partners</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">Our Partners</h2>
<p class="mb-4">
enviPath is backed by leading research institutions and collaborators:
</p>
<div class="flex flex-wrap justify-center items-center gap-8 my-8">
<img src="{% static '/images/uoa-logo-small.png' %}" alt="The University of Auckland" class="h-20 object-contain" />
<img src="{% static '/images/logo-eawag.svg' %}" alt="Eawag" class="h-16 object-contain" />
<img src="{% static '/images/uzh-logo.svg' %}" alt="University of Zurich" class="h-20 object-contain" />
<div class="my-8 flex flex-wrap items-center justify-center gap-8">
<img
src="{% static '/images/uoa-logo-small.png' %}"
alt="The University of Auckland"
class="h-20 object-contain"
/>
<img
src="{% static '/images/logo-eawag.svg' %}"
alt="Eawag"
class="h-16 object-contain"
/>
<img
src="{% static '/images/uzh-logo.svg' %}"
alt="University of Zurich"
class="h-20 object-contain"
/>
</div>
<h2 class="text-2xl font-semibold mt-8 mb-4">Our Team</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">Our Team</h2>
<p class="mb-4">
enviPath is developed and maintained by a dedicated team of computational chemists, environmental
scientists, and software engineers. Our interdisciplinary approach ensures that the platform meets
the needs of the scientific community while remaining accessible and user-friendly.
enviPath is developed and maintained by a dedicated team of
computational chemists, environmental scientists, and software
engineers. Our interdisciplinary approach ensures that the platform
meets the needs of the scientific community while remaining accessible
and user-friendly.
</p>
<h2 class="text-2xl font-semibold mt-8 mb-4">Research Impact</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">Research Impact</h2>
<p class="mb-4">
Since its inception, enviPath has contributed to numerous scientific publications and environmental
assessments. Our tools are used by:
Since its inception, enviPath has contributed to numerous scientific
publications and environmental assessments. Our tools are used by:
</p>
<ul class="list-disc list-inside mb-4 space-y-2">
<li>Academic researchers in environmental chemistry and toxicology</li>
<ul class="mb-4 list-inside list-disc space-y-2">
<li>
Academic researchers in environmental chemistry and toxicology
</li>
<li>Regulatory agencies for chemical risk assessment</li>
<li>Chemical manufacturers for product development and safety evaluation</li>
<li>
Chemical manufacturers for product development and safety evaluation
</li>
<li>Environmental consultants for contamination studies</li>
</ul>
<h2 class="text-2xl font-semibold mt-8 mb-4">Open Science Commitment</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">
Open Science Commitment
</h2>
<p class="mb-4">
We are committed to open science principles. enviPath provides free access to our database and
prediction tools for academic research. We actively contribute to the scientific community through
publications, open-source software, and collaboration.
We are committed to open science principles. enviPath provides free
access to our database and prediction tools for academic research. We
actively contribute to the scientific community through publications,
open-source software, and collaboration.
</p>
<div class="card bg-primary text-primary-content mt-8">
<div class="card-body">
<h3 class="card-title">Get Involved</h3>
<p>Join our community, contribute data, or collaborate on research projects.</p>
<div class="card-actions justify-end mt-4">
<a href="https://community.envipath.org/" target="_blank" class="btn btn-secondary">Visit Community</a>
<p>
Join our community, contribute data, or collaborate on research
projects.
</p>
<div class="card-actions mt-4 justify-end">
<a
href="https://community.envipath.org/"
target="_blank"
class="btn btn-secondary"
>Visit Community</a
>
<a href="/contact" class="btn btn-ghost">Contact Us</a>
</div>
</div>
</div>
<h2 class="text-2xl font-semibold mt-8 mb-4">Publications</h2>
<h2 class="mt-8 mb-4 text-2xl font-semibold">Publications</h2>
<p class="mb-4">
To learn more about the science behind enviPath, please visit our
<a href="/cite" class="link link-primary">citations page</a> for key publications and how to cite our work.
<a href="/cite" class="link link-primary">citations page</a> for key
publications and how to cite our work.
</p>
</div>
</div>

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