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

Compare commits

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

1 Commits
refactor/h ... fix/search

Author SHA1 Message Date
Tobias O
eb6c5ade29 fix: open and close search modal 
Modal now opens on badge click.
Modal now closes on random click around
 2025-11-12 15:37:35 +13:00
120 changed files with 7091 additions and 10838 deletions
Expand all files Collapse all files

5
epdb/urls.py
View File

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

16
epdb/views.py
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54
templates/admin.html
View File

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

135
templates/collections/joblog.html
View File

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

659
templates/collections/objects_list.html
View File

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

118
templates/compare.html
View File

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

19
templates/errors/400_bad_request.html
View File

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

21
templates/errors/403_access_denied.html
View File

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

19
templates/errors/404_not_found.html
View File

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

14
templates/errors/error.html
View File

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

15
templates/errors/user_account_inactive.html
View File

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

4
templates/framework.html
View File

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

6
templates/framework_modern.html
View File

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

97
templates/includes/footer.html
View File

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

13
templates/includes/navbar.html
View File

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

148
templates/index/index.html
View File

@ -2,86 +2,74 @@
{% load static %} {% load static %}
{% block main_content %} {% block main_content %}
<!-- Hero Section with Logo and Search --> <!-- Hero Section with Logo and Search -->
<section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none"> <section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative">
<div <div
class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br" class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600"
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;" style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
> >
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<!-- Predict Pathway text over the image --> <!-- Predict Pathway text over the image -->
<div class="absolute bottom-40 left-1/8 z-10 -translate-x-8"> <div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
<h2 class="text-base-100 text-left text-3xl text-shadow-lg"> <h2 class="text-3xl text-base-100 text-shadow-lg text-left">
Predict Your Pathway Predict Your Pathway
</h2> </h2>
</div> </div>
</div> </div>
</section> </section>
<div class="bg-base-200 mx-auto max-w-5xl shadow-md"> <div class="shadow-md max-w-5xl mx-auto bg-base-200">
<!-- Predict Pathway Section --> <!-- Predict Pathway Section -->
<div <div
class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse" class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 "
> >
<div <div
class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out" class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out"
> >
<div class="card-body"> <div class="card-body">
<div class="my-4 ml-8 flex h-fit flex-row items-center justify-start"> <!-- Input Mode Toggle - Fixed position outside fieldset -->
<div class="flex items-center gap-1"> <div class="flex flex-row justify-start items-center h-fit ml-8 my-4">
<label class="swap btn btn-ghost btn-sm p-1" title="Input Mode"> <div class="flex items-center gap-2">
<!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
<label class="toggle text-base-content toggle-md">
<input type="checkbox" /> <input type="checkbox" />
<span class="swap-on flex items-center gap-1"> <svg
<div aria-label="smiles mode"
class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
class="size-5"
>
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
fill="currentColor"
stroke="none"
> >
<svg <path
aria-label="smiles mode" fill-rule="evenodd"
xmlns="http://www.w3.org/2000/svg" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z"
viewBox="0 0 20 20" clip-rule="evenodd"
class="size-5" />
> </g>
<g </svg>
stroke-linejoin="round" <svg
stroke-linecap="round" aria-label="draw mode"
stroke-width="2" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20"
stroke="none" fill="currentColor"
> stroke="none"
<path class="size-5"
fill-rule="evenodd" >
d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" <path
clip-rule="evenodd" d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/> />
</g> </svg>
</svg>
</div>
<span class="ext-xs">SMILES</span>
</span>
<span class="swap-off flex items-center gap-1">
<div
class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
>
<svg
aria-label="draw mode"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
stroke="none"
class="size-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
</div>
<span class="text-base/50 text-xs">Draw</span>
</span>
</label> </label>
</div> </div>
</div> </div>
<fieldset <fieldset
class="fieldset overflow-hidden transition-all duration-300 ease-in-out" class="fieldset transition-all duration-300 ease-in-out overflow-hidden"
> >
<form <form
id="index-form" id="index-form"
@ -91,29 +79,29 @@
{% csrf_token %} {% csrf_token %}
<div <div
id="text-input-container" id="text-input-container"
class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100"
> >
<div class="join mx-auto w-full"> <div class="join w-full mx-auto">
<input <input
type="text" type="text"
id="index-form-text-input" id="index-form-text-input"
placeholder="canonical SMILES string" placeholder="canonical SMILES string"
class="input input-md join-item grow" class="input grow input-md join-item"
/> />
<button class="btn btn-neutral join-item">Predict!</button> <button class="btn btn-neutral join-item">Predict!</button>
</div> </div>
<div class="label relative mt-1 w-full"> <div class="label relative w-full mt-1">
<div class="flex gap-2"> <div class="flex gap-2">
<a <a
href="#" href="#"
class="example-link hover:text-primary cursor-pointer" class="example-link cursor-pointer hover:text-primary"
data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C" data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
title="load example" title="load example"
>Caffeine</a >Caffeine</a
> >
<a <a
href="#" href="#"
class="example-link hover:text-primary cursor-pointer" class="example-link cursor-pointer hover:text-primary"
data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O" data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
title="load example" title="load example"
>Ibuprofen</a >Ibuprofen</a
@ -126,7 +114,7 @@
</div> </div>
<div <div
id="ketcher-container" id="ketcher-container"
class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95"
> >
<iframe <iframe
id="index-ketcher" id="index-ketcher"
@ -136,13 +124,11 @@
class="rounded-lg" class="rounded-lg"
></iframe> ></iframe>
<button <button
class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full" class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2"
> >
Predict! Predict!
</button> </button>
<div class="mt-1 flex w-full justify-end"> <a class="label mx-auto w-full mt-1" href="#">Advanced</a>
<a class="label justify-end" href="/predict">Advanced</a>
</div>
</div> </div>
<input <input
type="hidden" type="hidden"
@ -164,18 +150,18 @@
</div> </div>
<!-- Community News Section --> <!-- Community News Section -->
<section class="bg-base-200 z-10 mx-8 py-16"> <section class="py-16 bg-base-200 z-10 mx-8">
<div class="mx-auto max-w-7xl px-4"> <div class="max-w-7xl mx-auto px-4">
<h2 class="h2 mb-8 text-left font-bold">Community Updates</h2> <h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
<div id="community-news-container" class="flex justify-center gap-4"> <div id="community-news-container" class="flex gap-4 justify-center">
<!-- News cards will be populated here --> <!-- News cards will be populated here -->
<div id="loading" class="flex w-full justify-center"> <div id="loading" class="flex justify-center w-full">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
</div> </div>
<div class="mt-6 text-right"> <div class="text-right mt-6">
<a <a
href="https://community.envipath.org/c/announcements/10" href="https://community.envipath.org/c/announcements/10"
target="_blank" target="_blank"
@ -191,18 +177,18 @@
</section> </section>
<!-- Mission Statement Section --> <!-- Mission Statement Section -->
<section class="from-base-200 to-base-100 bg-gradient-to-b py-16"> <section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
<div class="mx-auto px-8 md:px-12"> <div class="mx-auto px-8 md:px-12">
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
<div class="w-1/3"> <div class="w-1/3">
<img <img
src="{% static "/images/ep-rule-artwork.png" %}" src="{% static "/images/ep-rule-artwork.png" %}"
alt="rule-based iterative tree greneration" alt="rule-based iterative tree greneration"
class="h-full w-full object-contain" class="w-full h-full object-contain"
/> />
</div> </div>
<div class="mr-8 w-2/3 space-y-4 text-left"> <div class="space-y-4 text-left w-2/3 mr-8">
<h2 class="h2 mb-8 font-bold">About enviPath</h2> <h2 class="h2 font-bold mb-8">About enviPath</h2>
<p class=""> <p class="">
enviPath is a database and prediction system for the microbial enviPath is a database and prediction system for the microbial
biotransformation of organic environmental contaminants. The biotransformation of organic environmental contaminants. The
@ -215,7 +201,7 @@
products. Explore our tools and contribute to advancing products. Explore our tools and contribute to advancing
environmental biotransformation research. environmental biotransformation research.
</p> </p>
<div class="float-right flex flex-row gap-4"> <div class="flex flex-row gap-4 float-right">
<a href="/about" class="btn btn-ghost-neutral">Read More</a> <a href="/about" class="btn btn-ghost-neutral">Read More</a>
<a href="/about" class="btn btn-neutral">Publications</a> <a href="/about" class="btn btn-neutral">Publications</a>
</div> </div>
@ -225,7 +211,7 @@
</section> </section>
<!-- Partners Section --> <!-- Partners Section -->
<section class="bg-base-100 py-14 sm:py-12"> <section class="py-14 sm:py-12 bg-base-100">
<div class="mx-auto px-6 lg:px-8"> <div class="mx-auto px-6 lg:px-8">
<div class="divider"> <div class="divider">
<h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2> <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
@ -236,12 +222,12 @@
<img <img
src="{% static "/images/uoa-logo-small.png" %}" src="{% static "/images/uoa-logo-small.png" %}"
alt="The University of Auckland" alt="The University of Auckland"
class="max-h-20 w-full object-contain lg:col-span-1" class=" max-h-20 w-full object-contain lg:col-span-1"
/> />
<img <img
src="{% static "/images/logo-eawag.svg" %}" src="{% static "/images/logo-eawag.svg" %}"
alt="Eawag" alt="Eawag"
class="max-h-12 w-full object-contain lg:col-span-1" class=" max-h-12 w-full object-contain lg:col-span-1"
/> />
<img <img
src="{% static "/images/uzh-logo.svg" %}" src="{% static "/images/uzh-logo.svg" %}"

91
templates/migration.html
View File

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

106
templates/migration_detail.html
View File

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

75
templates/modals/cite_modal.html
View File

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

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

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

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

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

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

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

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

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

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

@ -1,270 +1,188 @@
<div
class="modal fade"
tabindex="-1"
id="new_model_modal"
role="dialog"
aria-labelledby="new_model_modal"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">New Model</h4>
</div>
<div class="modal-body">
<form
id="new_model_form"
accept-charset="UTF-8"
action="{{ meta.current_package.url }}/model"
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="jumbotron">
Create a new Model to limit the number of degradation products in
the prediction. You just need to set a name and the packages you
want the object to be based on. There are multiple types of models
available. For additional information have a look at our
<a
target="_blank"
href="https://wiki.envipath.org/index.php/relative-reasoning"
role="button"
>wiki &gt;&gt;</a
>
</div>
<!-- Name -->
<label for="model-name">Name</label>
<input
id="model-name"
name="model-name"
class="form-control"
placeholder="Name"
/>
<!-- Description --> <div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
<label for="model-description">Description</label> aria-hidden="true">
<input <div class="modal-dialog modal-lg">
id="model-description" <div class="modal-content">
name="model-description" <div class="modal-header">
class="form-control" <button type="button" class="close" data-dismiss="modal">
placeholder="Description" <span aria-hidden="true">&times;</span>
/> <span class="sr-only">Close</span>
</button>
<h4 class="modal-title">New Model</h4>
</div>
<div class="modal-body">
<form id="new_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
data-remote="true" method="post">
{% csrf_token %}
<div class="jumbotron">Create a new Model to
limit the number of degradation products in the
prediction. You just need to set a name and the packages
you want the object to be based on. There are multiple types of models available.
For additional information have a look at our
<a target="_blank" href="https://wiki.envipath.org/index.php/relative-reasoning" role="button">wiki
&gt;&gt;</a>
</div>
<!-- Name -->
<label for="model-name">Name</label>
<input id="model-name" name="model-name" class="form-control" placeholder="Name"/>
<!-- Model Type --> <!-- Description -->
<label for="model-type">Model Type</label> <label for="model-description">Description</label>
<select <input id="model-description" name="model-description" class="form-control"
id="model-type" placeholder="Description"/>
name="model-type"
class="form-control"
data-width="100%"
>
<option disabled selected>Select Model Type</option>
{% for k, v in model_types.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
</select>
<!-- Rule Packages --> <!-- Model Type -->
<div id="rule-packages" class="ep-model-param mlrr rbrr"> <label for="model-type">Model Type</label>
<label for="model-rule-packages">Rule Packages</label> <select id="model-type" name="model-type" class="form-control" data-width='100%'>
<select <option disabled selected>Select Model Type</option>
id="model-rule-packages" {% for k, v in model_types.items %}
name="model-rule-packages" <option value="{{ v }}">{{ k }}</option>
data-actions-box="true" {% endfor %}
class="form-control" </select>
multiple
data-width="100%"
>
<option disabled>Reviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option> <!-- Rule Packages -->
{% for obj in meta.readable_packages %} <div id="rule-packages" class="ep-model-param mlrr rbrr">
{% if not obj.reviewed %} <label for="model-rule-packages">Rule Packages</label>
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <select id="model-rule-packages" name="model-rule-packages" data-actions-box='true'
{% endif %} class="form-control" multiple data-width='100%'>
{% endfor %} <option disabled>Reviewed Packages</option>
</select> {% for obj in meta.readable_packages %}
</div> {% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<!-- Data Packages --> <option disabled>Unreviewed Packages</option>
<div id="data-packages" class="ep-model-param mlrr rbrr enviformer"> {% for obj in meta.readable_packages %}
<label for="model-data-packages">Data Packages</label> {% if not obj.reviewed %}
<select <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
id="model-data-packages" {% endif %}
name="model-data-packages" {% endfor %}
data-actions-box="true" </select>
class="form-control" </div>
multiple
data-width="100%"
>
<option disabled>Reviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option> <!-- Data Packages -->
{% for obj in meta.readable_packages %} <div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
{% if not obj.reviewed %} <label for="model-data-packages">Data Packages</label>
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <select id="model-data-packages" name="model-data-packages" data-actions-box='true'
{% endif %} class="form-control" multiple data-width='100%'>
{% endfor %} <option disabled>Reviewed Packages</option>
</select> {% for obj in meta.readable_packages %}
</div> {% if obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<!-- Fingerprinter --> <option disabled>Unreviewed Packages</option>
<div id="fingerprinter" class="ep-model-param mlrr"> {% for obj in meta.readable_packages %}
<label for="model-fingerprinter">Fingerprinter</label> {% if not obj.reviewed %}
<select <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
id="model-fingerprinter" {% endif %}
name="model-fingerprinter" {% endfor %}
data-actions-box="true" </select>
class="form-control" </div>
multiple
data-width="100%"
>
<option value="MACCS" selected>MACCS Fingerprinter</option>
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
<option disabled selected>
Select Additional Fingerprinter / Descriptor
</option>
{% for k, v in additional_descriptors.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<!-- Threshold --> <!-- Fingerprinter -->
<div id="threshold" class="ep-model-param mlrr enviformer"> <div id="fingerprinter" class="ep-model-param mlrr">
<label for="model-threshold">Threshold</label> <label for="model-fingerprinter">Fingerprinter</label>
<input <select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
type="number" class="form-control" multiple data-width='100%'>
min="0" <option value="MACCS" selected>MACCS Fingerprinter</option>
max="1" {% if meta.enabled_features.PLUGINS and additional_descriptors %}
step="0.05" <option disabled selected>Select Additional Fingerprinter / Descriptor</option>
value="0.5" {% for k, v in additional_descriptors.items %}
id="model-threshold" <option value="{{ v }}">{{ k }}</option>
name="model-threshold" {% endfor %}
class="form-control" {% endif %}
/> </select>
</div> </div>
<div id="appdomain" class="ep-model-param mlrr"> <!-- Threshold -->
{% if meta.enabled_features.APPLICABILITY_DOMAIN %} <div id="threshold" class="ep-model-param mlrr enviformer">
<!-- Build AD? --> <label for="model-threshold">Threshold</label>
<div class="checkbox"> <input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
<label> name="model-threshold" class="form-control">
<input </div>
type="checkbox"
id="build-app-domain" <div id="appdomain" class="ep-model-param mlrr">
name="build-app-domain" {% if meta.enabled_features.APPLICABILITY_DOMAIN %}
/>Also build an Applicability Domain? <!-- Build AD? -->
</label> <div class="checkbox">
</div> <label>
<div id="ad-params" style="display:none"> <input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
<!-- Num Neighbors --> Applicability Domain?
<label for="num-neighbors">Number of Neighbors</label> </label>
<input </div>
id="num-neighbors" <div id="ad-params" style="display:none">
name="num-neighbors" <!-- Num Neighbors -->
type="number" <label for="num-neighbors">Number of Neighbors</label>
class="form-control" <input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
value="5" value="5"
step="1" step="1" min="0" max="10">
min="0" <!-- Local Compatibility -->
max="10" <label for="local-compatibility-threshold">Local Compatibility Threshold</label>
/> <input id="local-compatibility-threshold" name="local-compatibility-threshold"
<!-- Local Compatibility --> type="number"
<label for="local-compatibility-threshold" class="form-control" value="0.5" step="0.01" min="0" max="1">
>Local Compatibility Threshold</label <!-- Reliability -->
> <label for="reliability-threshold">Reliability Threshold</label>
<input <input id="reliability-threshold" name="reliability-threshold" type="number"
id="local-compatibility-threshold" class="form-control" value="0.5" step="0.01" min="0" max="1">
name="local-compatibility-threshold" </div>
type="number" {% endif %}
class="form-control" </div>
value="0.5" </form>
step="0.01" </div>
min="0" <div class="modal-footer">
max="1" <a id="new_model_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
/> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<!-- Reliability --> </div>
<label for="reliability-threshold">Reliability Threshold</label> </div>
<input
id="reliability-threshold"
name="reliability-threshold"
type="number"
class="form-control"
value="0.5"
step="0.01"
min="0"
max="1"
/>
</div>
{% endif %}
</div>
</form>
</div>
<div class="modal-footer">
<a id="new_model_modal_form_submit" class="btn btn-primary" href="#"
>Submit</a
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
// Built in Model Types // Built in Model Types
var nativeModelTypes = ["mlrr", "rbrr", "enviformer"]; var nativeModelTypes = [
"mlrr",
"rbrr",
"enviformer",
]
// Initially hide all "specific" forms
$(".ep-model-param").each(function () {
$(this).hide();
});
$('#model-type').selectpicker();
$("#model-fingerprinter").selectpicker();
$("#model-rule-packages").selectpicker();
$("#model-data-packages").selectpicker();
$("#build-app-domain").change(function () {
if ($(this).is(":checked")) {
$('#ad-params').show();
} else {
$('#ad-params').hide();
}
});
// On change hide all and show only selected
$("#model-type").change(function () {
$('.ep-model-param').hide();
var modelType = $('#model-type').val();
if (nativeModelTypes.indexOf(modelType) !== -1) {
$('.' + modelType).show();
} else {
// do nothing
}
});
$('#new_model_modal_form_submit').on('click', function (e) {
e.preventDefault();
$('#new_model_form').submit();
});
// Initially hide all "specific" forms
$(".ep-model-param").each(function () {
$(this).hide();
}); });
$("#model-type").selectpicker();
$("#model-fingerprinter").selectpicker();
$("#model-rule-packages").selectpicker();
$("#model-data-packages").selectpicker();
$("#build-app-domain").change(function () {
if ($(this).is(":checked")) {
$("#ad-params").show();
} else {
$("#ad-params").hide();
}
});
// On change hide all and show only selected
$("#model-type").change(function () {
$(".ep-model-param").hide();
var modelType = $("#model-type").val();
if (nativeModelTypes.indexOf(modelType) !== -1) {
$("." + modelType).show();
} else {
// do nothing
}
});
$("#new_model_modal_form_submit").on("click", function (e) {
e.preventDefault();
$("#new_model_form").submit();
});
});
</script> </script>

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

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

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

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

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

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

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

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

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

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

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

@ -1,153 +1,102 @@
<div <div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_modal"
class="modal fade" aria-hidden="true">
tabindex="-1" <div class="modal-dialog modal-lg">
id="new_scenario_modal" <div class="modal-content">
role="dialog" <div class="modal-header">
aria-labelledby="new_scenario_modal" <button type="button" class="close" data-dismiss="modal">
aria-hidden="true" <span aria-hidden="true">&times;</span>
> <span class="sr-only">Close</span>
<div class="modal-dialog modal-lg"> </button>
<div class="modal-content"> <h4 class="modal-title">New Scenario</h4>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">New Scenario</h4>
</div>
<div class="modal-body">
<form
id="new_scenario_form"
accept-charset="UTF-8"
action="{{ meta.current_package.url }}/scenario"
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="jumbotron">
Please enter name, description, and date of scenario. Date should be
associated to the data, not the current date. For example, this
could reflect the publishing date of a study. You can leave all
fields but the name empty and fill them in later.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/scenario"
role="button"
>wiki &gt;&gt;</a
>
</div>
<label for="scenario-name">Name</label>
<input
id="scenario-name"
name="scenario-name"
class="form-control"
placeholder="Name"
/>
<label for="scenario-description">Description</label>
<input
id="scenario-description"
name="scenario-description"
class="form-control"
placeholder="Description"
/>
<label id="dateField" for="dateYear">Date</label>
<table>
<tr>
<th>
<input
type="number"
id="dateYear"
name="scenario-date-year"
class="form-control"
placeholder="YYYY"
max="{% now "Y" %}"
/>
</th>
<th>
<input
type="number"
id="dateMonth"
name="scenario-date-month"
min="1"
max="12"
class="form-control"
placeholder="MM"
/>
</th>
<th>
<input
type="number"
id="dateDay"
name="scenario-date-day"
min="1"
max="31"
class="form-control"
placeholder="DD"
/>
</th>
</tr>
</table>
<label for="scenario-type">Scenario Type</label>
<select
id="scenario-type"
name="scenario-type"
class="form-control"
data-width="100%"
>
<option value="empty" selected>Empty Scenario</option>
{% for k, v in scenario_types.items %}
<option value="{{ v.name }}">{{ k }}</option>
{% endfor %}
</select>
{% for type in scenario_types.values %}
<div id="{{ type.name }}-specific-inputs">
{% for widget in type.widgets %}
{{ widget|safe }}
{% endfor %}
</div> </div>
{% endfor %} <div class="modal-body">
</form> <form id="new_scenario_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/scenario"
</div> data-remote="true" method="post">
<div class="modal-footer"> {% csrf_token %}
<a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#" <div class="jumbotron">Please enter name, description, and date of scenario. Date should be
>Submit</a associated to the data, not the current date. For example, this could reflect the publishing
> date of a study. You can leave all fields but the name empty and fill them in later.
<button type="button" class="btn btn-default" data-dismiss="modal"> <a target="_blank" href="https://wiki.envipath.org/index.php/scenario" role="button">wiki
Cancel &gt;&gt;</a>
</button> </div>
</div> <label for="scenario-name">Name</label>
<input id="scenario-name" name="scenario-name" class="form-control" placeholder="Name"/>
<label for="scenario-description">Description</label>
<input id="scenario-description" name="scenario-description" class="form-control"
placeholder="Description"/>
<label id="dateField" for="dateYear">Date</label>
<table>
<tr>
<th>
<input type="number" id="dateYear" name="scenario-date-year" class="form-control"
placeholder="YYYY" max="{% now "Y" %}">
</th>
<th>
<input type="number" id="dateMonth" name="scenario-date-month" min="1" max="12"
class="form-control" placeholder="MM" >
</th>
<th>
<input type="number" id="dateDay" name="scenario-date-day" min="1" max="31" class="form-control"
placeholder="DD">
</th>
</tr>
</table>
<label for="scenario-type">Scenario Type</label>
<select id="scenario-type" name="scenario-type" class="form-control" data-width='100%'>
<option value="empty" selected>Empty Scenario</option>
{% for k, v in scenario_types.items %}
<option value="{{ v.name }}">{{ k }}</option>
{% endfor %}
</select>
{% for type in scenario_types.values %}
<div id="{{ type.name }}-specific-inputs">
{% for widget in type.widgets %}
{{ widget|safe }}
{% endfor %}
</div>
{% endfor %}
</form>
</div>
<div class="modal-footer">
<a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
// Initially hide all "specific" forms // Initially hide all "specific" forms
$("div[id$='-specific-inputs']").each(function () { $("div[id$='-specific-inputs']").each(function () {
$(this).hide(); $(this).hide();
});
// On change hide all and show only selected
$("#scenario-type").change(function () {
$("div[id$='-specific-inputs']").each(function () {
$(this).hide();
});
val = $('option:selected', this).val();
$("#" + val + "-specific-inputs").show();
});
$('#new_scenario_modal_form_submit').on('click', function (e) {
e.preventDefault();
$('#new_scenario_form').submit();
});
var dateYear = document.getElementById("dateYear");
dateYear.addEventListener("change", () => {
console.log("Final value after editing:", dateYear.value);
if (dateYear.value.length < 4) {
dateYear.value = {% now "Y" %};
}
});
}); });
// On change hide all and show only selected
$("#scenario-type").change(function () {
$("div[id$='-specific-inputs']").each(function () {
$(this).hide();
});
val = $("option:selected", this).val();
$("#" + val + "-specific-inputs").show();
});
$("#new_scenario_modal_form_submit").on("click", function (e) {
e.preventDefault();
$("#new_scenario_form").submit();
});
var dateYear = document.getElementById("dateYear");
dateYear.addEventListener("change", () => {
console.log("Final value after editing:", dateYear.value);
if (dateYear.value.length < 4) {
dateYear.value = new Date().getFullYear();
}
});
});
</script> </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

273
templates/modals/predict_modal.html
View File

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

275
templates/objects/composite_rule.html
View File

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

582
templates/objects/compound.html
View File

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

218
templates/objects/compound_structure.html
View File

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

336
templates/objects/edge.html
View File

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

245
templates/objects/enzymelink.html
View File

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

117
templates/objects/group.html
View File

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

14
templates/objects/model.html
View File

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

260
templates/objects/node.html
View File

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

107
templates/objects/package.html
View File

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

738
templates/objects/pathway.html
View File

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

548
templates/objects/reaction.html
View File

@ -2,352 +2,224 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/edit_reaction_modal.html" %} {% include "modals/objects/edit_reaction_modal.html" %}
{% include "modals/objects/generic_set_aliases_modal.html" %} {% include "modals/objects/generic_set_aliases_modal.html" %}
{% include "modals/objects/generic_set_scenario_modal.html" %} {% include "modals/objects/generic_set_scenario_modal.html" %}
{% include "modals/objects/generic_copy_object_modal.html" %} {% include "modals/objects/generic_copy_object_modal.html" %}
{% include "modals/objects/generic_set_external_reference_modal.html" %} {% include "modals/objects/generic_set_external_reference_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="reaction-detail"> <div class="panel-group" id="reaction-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ reaction.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ reaction.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/reaction.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button"
aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/reaction.html" %}
{% endblock %}
</ul>
</div>
</div>
<!-- Description --> <!-- Description -->
<div <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
class="panel panel-default panel-heading list-group-item"
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
>
</h4>
</div>
<div id="reaction-desc" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{{ reaction.description|safe }}
</div>
</div>
{% if reaction.aliases %}
<!-- Aliases -->
<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
>
</h4>
</div>
<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>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Image -->
<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
>
</h4>
</div>
<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>
</div>
<!-- Reaction Description -->
<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
>
</h4>
</div>
<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
>
{% endfor %}
<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
>
{% endfor %}
</div>
</div>
<!-- SMIRKS -->
<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
>
</h4>
</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"
>
<h4 class="panel-title">
<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 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
>
{% endfor %}
</div>
</div>
{% endif %}
{% if reaction.get_related_enzymes %}
<!-- EC Numbers -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="rule-ec-numbers-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-ec-numbers"
>EC Numbers</a
>
</h4>
</div>
<div id="rule-ec-numbers" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for 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
>
{% endfor %}
</div>
</div>
{% endif %}
{% if reaction.related_pathways %}
<!-- Pathways -->
<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
>
</h4>
</div>
<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
>
{% endfor %}
</div>
</div>
{% endif %}
{% if reaction.scenarios.all %}
<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
>
</h4>
</div>
<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
>
{% endfor %}
</div>
</div>
{% endif %}
<!-- External Identifiers -->
{% if reaction.get_external_identifiers %}
<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
>
</h4>
</div>
<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"
>
<h4 class="panel-title"> <h4 class="panel-title">
<a <a id="reaction-desc-link" data-toggle="collapse" data-parent="#reaction-detail"
id="reaction-rhea-identifier-link" href="#reaction-desc">Description</a>
data-toggle="collapse"
data-parent="#reaction-external-identifier"
href="#reaction-rhea-identifier"
>Rhea</a
>
</h4> </h4>
</div> </div>
<div <div id="reaction-desc" class="panel-collapse collapse in">
id="reaction-rhea-identifier" <div class="panel-body list-group-item">
class="panel-collapse in collapse" {{ reaction.description|safe }}
> </div>
{% for eid in reaction.get_rhea_identifiers %} </div>
<a class="list-group-item" href="{{ eid.external_url }}"
>{{ eid.identifier_value }}</a {% if reaction.aliases %}
> <!-- Aliases -->
{% endfor %} <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
</div> <h4 class="panel-title">
<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 class="panel-body list-group-item">
{% for alias in reaction.aliases %}
<a class="list-group-item">{{ alias }}</a>
{% endfor %}
</div>
</div>
{% endif %} {% endif %}
{% if reaction.get_uniprot_identifiers %}
<div <!-- Image -->
class="panel panel-default panel-heading list-group-item" <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
style="background-color:silver"
>
<h4 class="panel-title"> <h4 class="panel-title">
<a <a id="reaction-image-link" data-toggle="collapse" data-parent="#reaction-detail"
id="reaction-uniprot-identifier-link" href="#reaction-image">Image Representation</a>
data-toggle="collapse"
data-parent="#reaction-external-identifier"
href="#reaction-uniprot-identifier"
>UniProt</a
>
</h4> </h4>
</div> </div>
<div <div id="reaction-image" class="panel-collapse collapse in">
id="reaction-uniprot-identifier" <div class="panel-body list-group-item">
class="panel-collapse in collapse" <div id="image-div" align="center">
> {{ reaction.as_svg|safe }}
{% for eid in reaction.get_uniprot_identifiers %} </div>
<a class="list-group-item" href="{{ eid.external_url }}" </div>
>10 SwissProt entries ({{ eid.identifier_value }})</a </div>
>
{% endfor %} <!-- Reaction Description -->
</div> <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>
</h4>
</div>
<div id="reaction-description-smiles" class="panel-collapse collapse in">
<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>
{% endfor %}
<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>
{% endfor %}
</div>
</div>
<!-- SMIRKS -->
<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>
</h4>
</div>
<div id="reaction-smirks" class="panel-collapse collapse in">
<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">
<h4 class="panel-title">
<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 class="panel-body list-group-item">
{% for r in reaction.rules.all %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }}</a>
{% endfor %}
</div>
</div>
{% endif %} {% endif %}
</div>
{% if reaction.get_related_enzymes %}
<!-- EC Numbers -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-ec-numbers">EC Numbers</a>
</h4>
</div>
<div id="rule-ec-numbers" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for 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>
{% endfor %}
</div>
</div>
{% endif %}
{% if reaction.related_pathways %}
<!-- Pathways -->
<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>
</h4>
</div>
<div id="reaction-pathway" class="panel-collapse collapse in">
<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>
{% endfor %}
</div>
</div>
{% endif %}
{% if reaction.scenarios.all %}
<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>
</h4>
</div>
<div id="reaction-scenario" class="panel-collapse collapse in">
<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>
{% endfor %}
</div>
</div>
{% endif %}
<!-- External Identifiers -->
{% if reaction.get_external_identifiers %}
<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>
</h4>
</div>
<div id="reaction-external-identifier" class="panel-collapse collapse in">
<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">
<h4 class="panel-title">
<a id="reaction-rhea-identifier-link" data-toggle="collapse"
data-parent="#reaction-external-identifier"
href="#reaction-rhea-identifier">Rhea</a>
</h4>
</div>
<div id="reaction-rhea-identifier" class="panel-collapse collapse in">
{% for eid in reaction.get_rhea_identifiers %}
<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">
<h4 class="panel-title">
<a id="reaction-uniprot-identifier-link" data-toggle="collapse"
data-parent="#reaction-external-identifier"
href="#reaction-uniprot-identifier">UniProt</a>
</h4>
</div>
<div id="reaction-uniprot-identifier" class="panel-collapse collapse in">
{% for eid in reaction.get_uniprot_identifiers %}
<a class="list-group-item"
href="{{ eid.external_url }}">10 SwissProt entries ({{ eid.identifier_value }})</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div> </div>
{% endif %}
</div> </div>
</div>
{% endblock content %} {% endblock content %}

186
templates/objects/scenario.html
View File

@ -2,120 +2,88 @@
{% block content %} {% block content %}
{% block action_modals %} {% block action_modals %}
{% include "modals/objects/add_additional_information_modal.html" %} {% include "modals/objects/add_additional_information_modal.html" %}
{% include "modals/objects/update_scenario_additional_information_modal.html" %} {% include "modals/objects/update_scenario_additional_information_modal.html" %}
{% include "modals/objects/generic_delete_modal.html" %} {% include "modals/objects/generic_delete_modal.html" %}
{% endblock action_modals %} {% endblock action_modals %}
<div class="panel-group" id="scenario-detail"> <div class="panel-group" id="scenario-detail">
<div class="panel panel-default"> <div class="panel panel-default">
<div <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
class="panel-heading" {{ scenario.name|safe }}
id="headingPanel" <div id="actionsButton"
style="font-size:2rem;height: 46px" style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
> class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
{{ scenario.name|safe }} aria-haspopup="true" aria-expanded="false"><span
<div class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
id="actionsButton" style="padding-right:1em"></span></a>
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" <ul id="actionsList" class="dropdown-menu">
class="dropdown" {% block actions %}
> {% include "actions/objects/scenario.html" %}
<a {% endblock %}
href="#" </ul>
class="dropdown-toggle" </div>
data-toggle="dropdown" </div>
role="button"
aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/scenario.html" %}
{% endblock %}
</ul>
</div> </div>
</div>
</div> </div>
</div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Description</div> <div class="panel-heading">Description</div>
<div class="panel-body"> <div class="panel-body">
{{ scenario.description|safe }} {{ scenario.description|safe }}
<br /> <br>
{{ scenario.scenario_type }} {{ scenario.scenario_type }}
<br /> <br>
Reported {{ scenario.scenario_date }} Reported {{ scenario.scenario_date }}
</div>
</div> </div>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table <table id="scenario-table" class="table table-bordered table-striped table-hover">
id="scenario-table" <tbody>
class="table-bordered table-striped table-hover table" <tr>
> <th>Property</th>
<tbody> <th>Value</th>
<tr> <th>Unit</th>
<th>Property</th> {% if meta.can_edit %}
<th>Value</th> <th>Remove</th>
<th>Unit</th> {% endif %}
{% if meta.can_edit %} </tr>
<th>Remove</th>
{% endif %}
</tr>
{% for ai in scenario.get_additional_information %} {% for ai in scenario.get_additional_information %}
<tr> <tr>
<td>{{ ai.property_name|safe }}</td> <td> {{ ai.property_name|safe }} </td>
<td>{{ ai.property_data|safe }}</td> <td> {{ ai.property_data|safe }} </td>
<td>{{ ai.property_unit|safe }}</td> <td> {{ ai.property_unit|safe }} </td>
{% if meta.can_edit %}
<td>
<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>
</form>
</td>
{% endif %}
</tr>
{% endfor %}
{% if meta.can_edit %} {% if meta.can_edit %}
<td> <tr>
<form <td></td>
action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}" <td></td>
method="post" <td>Delete all</td>
> <td>
{% csrf_token %} <form action="{% url 'package scenario detail' scenario.package.uuid scenario.uuid %}" method="post">
<input type="hidden" name="uuid" value="{{ ai.uuid }}" /> {% csrf_token %}
<input <input type="hidden" name="hidden" value="delete-all-additional-information">
type="hidden" <button type="submit" class="btn"><span class="glyphicon glyphicon-trash"></span></button>
name="hidden" </form>
value="delete-additional-information" </td>
/> </tr>
<button type="submit" class="btn">
<span class="glyphicon glyphicon-minus"></span>
</button>
</form>
</td>
{% endif %} {% endif %}
</tr> </tbody>
{% endfor %} </table>
{% if meta.can_edit %} </div>
<tr>
<td></td>
<td></td> {% endblock content %}
<td>Delete all</td>
<td>
<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>
</form>
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endblock content %}

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