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

Compare commits

merge into: 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
...
pull from: 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

6 Commits
fix/search ... refactor/h

Author SHA1 Message Date
Tim Lorsbach
53fc91acf5 mrg 2025-11-12 10:27:17 +01:00
Tobias O
12a20756d6 [Fix] Add/Update missing nav links (#196) 
Adds packages to the footer (instead of Browse link) and removes search from footer (search page not directly linked anymore).
Packages are also available in Browse now.

This is temporary until there is a proper data browsing page.

Co-authored-by: jebus <lorsbach@envipath.com>
Reviewed-on: enviPath/enviPy#196
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
 2025-11-12 22:24:33 +13:00
Tobias O
d20a705011 [Feature] Add per-package pathway prediction (#195) 
## Major Changes

- Introduces a new view for per-package predictions

Co-authored-by: jebus <lorsbach@envipath.com>
Reviewed-on: enviPath/enviPy#195
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
 2025-11-12 22:01:34 +13:00
Tobias O
debbef8158 [Enhancement] Cleanup Landing Page Form (#194) 
I changed the toggle style to be more self evident.
Do you think this is enough, or should I add an (ugly) label?

![image.png](/attachments/0e4ce043-7544-4852-9db9-460517b36d64)

Co-authored-by: jebus <lorsbach@envipath.com>
Reviewed-on: enviPath/enviPy#194
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
 2025-11-12 21:42:02 +13:00
Tobias O
2799718951 fix: open and close search modal (#192) 
Modal now opens on badge click.
Modal now closes on random click around

Reviewed-on: enviPath/enviPy#192
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
 2025-11-12 20:53:52 +13:00
Tobias O
34aed2c7aa refactor: large scale formatting/linting 2025-11-12 15:51:13 +13:00
122 changed files with 11435 additions and 7717 deletions
Expand all files Collapse all files

5
epdb/urls.py
View File

@ -142,6 +142,11 @@ 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,6 +374,22 @@ 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,6 +1,7 @@
{% 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> >
{% endif %} </li>
{% endif %}

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

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

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

@ -1,6 +1,7 @@
{% 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> >
{% endif %} </li>
{% endif %}

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

@ -1,4 +1,5 @@
<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,6 +1,7 @@
{% 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,6 +1,7 @@
{% 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> >
{% endif %} </li>
{% endif %}

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

@ -1,12 +1,20 @@
<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 role="button" data-toggle="modal" data-target="#import_legacy_package_modal"> <a
<span class="glyphicon glyphicon-import"></span> Import Package from legacy JSON</a> role="button"
</li> data-toggle="modal"
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,6 +1,9 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a href="{{ meta.server_url }}/predict"> <a
<span class="glyphicon glyphicon-plus"></span> New Pathway</a> href="{% if meta.current_package %}{{ meta.current_package.url }}/predict{% else %}{{ meta.server_url }}/predict{% endif %}"
</li> >
<span class="glyphicon glyphicon-plus"></span> New Pathway</a
>
</li>
{% endif %} {% endif %}

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

@ -1,6 +1,7 @@
{% 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> >
{% endif %} </li>
{% endif %}

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

@ -1,6 +1,7 @@
{% 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,6 +1,7 @@
{% 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> >
{% endif %} </li>
{% endif %}

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

@ -1,6 +1,7 @@
{% 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> >
{% endif %} </li>
{% endif %}

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

@ -1,32 +1,43 @@
{% 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>
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <li>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
<li> >
<a role="button" data-toggle="modal" data-target="#add_structure_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> Add Structure</a> <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="#set_scenario_modal"> >
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_scenario_modal">
<a role="button" data-toggle="modal" data-target="#generic_set_external_reference_modal"> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
<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,22 +1,35 @@
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a role="button" data-toggle="modal" data-target="#edit_compound_structure_modal"> <a
<i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a> role="button"
</li> data-toggle="modal"
<li> data-target="#edit_compound_structure_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-edit"></i> Edit Compound Structure</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_aliases_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set Aliases</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="#set_scenario_modal">
<li> <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> >
<i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</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>
<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,14 +1,17 @@
{% 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>
<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 Edge</a> <li>
</li> <a class="button" data-toggle="modal" data-target="#generic_delete_modal">
<i class="glyphicon glyphicon-trash"></i> Delete Edge</a
>
</li>
{% endif %} {% endif %}

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

@ -1,10 +1,12 @@
{% 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>
<a role="button" data-toggle="modal" data-target="#generic_delete_modal"> <li>
<i class="glyphicon glyphicon-trash"></i> Delete Group</a> <a role="button" data-toggle="modal" data-target="#generic_delete_modal">
</li> <i class="glyphicon glyphicon-trash"></i> Delete Group</a
{% endif %} >
</li>
{% endif %}

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

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

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

@ -1,18 +1,22 @@
{% 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>
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <li>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set Aliases</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 class="button" data-toggle="modal" data-target="#generic_delete_modal"> >
<i class="glyphicon glyphicon-trash"></i> Delete Node</a> </li>
</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,26 +1,36 @@
{% 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>
<a role="button" data-toggle="modal" data-target="#edit_package_permissions_modal"> <li>
<i class="glyphicon glyphicon-user"></i> Edit Permissions</a> <a
</li> role="button"
<li> data-toggle="modal"
<a role="button" data-toggle="modal" data-target="#publish_package_modal"> data-target="#edit_package_permissions_modal"
<i class="glyphicon glyphicon-bullhorn"></i> Publish Package</a> >
</li> <i class="glyphicon glyphicon-user"></i> Edit Permissions</a
<li> >
<a role="button" data-toggle="modal" data-target="#export_package_modal"> </li>
<i class="glyphicon glyphicon-bullhorn"></i> Export Package as JSON</a> <li>
</li> <a role="button" data-toggle="modal" data-target="#publish_package_modal">
<li> <i class="glyphicon glyphicon-bullhorn"></i> Publish Package</a
<a role="button" data-toggle="modal" data-target="#set_license_modal"> >
<i class="glyphicon glyphicon-duplicate"></i> License</a> </li>
</li> <li>
<li> <a role="button" data-toggle="modal" data-target="#export_package_modal">
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> <i class="glyphicon glyphicon-bullhorn"></i> Export Package as JSON</a
<i class="glyphicon glyphicon-trash"></i> Delete Package</a> >
</li> </li>
{% endif %} <li>
<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,59 +1,92 @@
{% 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>
<a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal"> <li>
<i class="glyphicon glyphicon-plus"></i> Add Reaction</a> <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Add Reaction</a
<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>
<a class="button" data-toggle="modal" data-target="#download_pathway_csv_modal"> <li>
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a> <a
</li> class="button"
<li> data-toggle="modal"
<a class="button" data-toggle="modal" data-target="#download_pathway_image_modal"> data-target="#download_pathway_csv_modal"
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a> >
</li> <i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as CSV</a
>
</li>
<li>
<a
class="button"
data-toggle="modal"
data-target="#download_pathway_image_modal"
>
<i class="glyphicon glyphicon-floppy-save"></i> Download Pathway as Image</a
>
</li>
{% if meta.can_edit %} {% if meta.can_edit %}
<li> <li>
<a class="button" data-toggle="modal" data-target="#identify_missing_rules_modal"> <a
<i class="glyphicon glyphicon-question-sign"></i> Identify Missing Rules</a> class="button"
</li> data-toggle="modal"
<li role="separator" class="divider"></li> data-target="#identify_missing_rules_modal"
<li> >
<a class="button" data-toggle="modal" data-target="#edit_pathway_modal"> <i class="glyphicon glyphicon-question-sign"></i> Identify Missing
<i class="glyphicon glyphicon-edit"></i> Edit Pathway</a> Rules</a
</li> >
<li> </li>
<a role="button" data-toggle="modal" data-target="#set_scenario_modal"> <li role="separator" class="divider"></li>
<i class="glyphicon glyphicon-plus"></i> Set Scenarios</a> <li>
</li> <a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
<li> <i class="glyphicon glyphicon-edit"></i> Edit Pathway</a
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> >
<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 class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#} <i class="glyphicon glyphicon-plus"></i> Set Scenarios</a
{# <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#} >
{# </li>#} </li>
<li role="separator" class="divider"></li> <li>
<li> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
<a class="button" data-toggle="modal" data-target="#delete_pathway_node_modal"> <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a> >
</li> </li>
<li> {# <li>#}
<a class="button" data-toggle="modal" data-target="#delete_pathway_edge_modal"> {# <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
<i class="glyphicon glyphicon-trash"></i> Delete Reaction</a> {# <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#}
</li> {# </li>#}
<li> <li role="separator" class="divider"></li>
<a class="button" data-toggle="modal" data-target="#generic_delete_modal"> <li>
<i class="glyphicon glyphicon-trash"></i> Delete Pathway</a> <a
</li> class="button"
data-toggle="modal"
data-target="#delete_pathway_node_modal"
>
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a
>
</li>
<li>
<a
class="button"
data-toggle="modal"
data-target="#delete_pathway_edge_modal"
>
<i class="glyphicon glyphicon-trash"></i> Delete Reaction</a
>
</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,28 +1,38 @@
{% 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>
<a role="button" data-toggle="modal" data-target="#set_aliases_modal"> <li>
<i class="glyphicon glyphicon-plus"></i> Set Aliases</a> <a role="button" data-toggle="modal" data-target="#set_aliases_modal">
</li> <i class="glyphicon glyphicon-plus"></i> Set Aliases</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 Reaction</a> <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a
</li> >
</li>
{% endif %} {% endif %}

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

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

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

@ -1,22 +1,30 @@
{% 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>
<a role="button" data-toggle="modal" data-target="#edit_password_modal"> <li>
<i class="glyphicon glyphicon-lock"></i> Update Password</a> <a role="button" data-toggle="modal" data-target="#edit_password_modal">
</li> <i class="glyphicon glyphicon-lock"></i> Update Password</a
<li> >
<a role="button" data-toggle="modal" data-target="#new_prediction_setting_modal"> </li>
<i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a> <li>
</li> <a
{# <li>#} role="button"
{# <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#} data-toggle="modal"
{# <i class="glyphicon glyphicon-console"></i> Manage API Token</a>#} data-target="#new_prediction_setting_modal"
{# </li>#} >
<li> <i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a
<a role="button" data-toggle="modal" data-target="#generic_delete_modal"> >
<i class="glyphicon glyphicon-trash"></i> Delete Account</a> </li>
</li> {# <li>#}
{% endif %} {# <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#}
{# <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,12 +1,17 @@
{% 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 id="textarea" class="form-control" rows="10" placeholder="Paste query here" required> <textarea
id="textarea"
class="form-control"
rows="10"
placeholder="Paste query here"
required
>
PREFIX pps: <http://localhost:8080/vocabulary#> PREFIX pps: <http://localhost:8080/vocabulary#>
SELECT ?name (count(?objId) as ?xcnt) SELECT ?name (count(?objId) as ?xcnt)
WHERE { WHERE {
@ -15,32 +20,29 @@ 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> >
<button id="submit" type="button" class="btn btn-primary">Submit</button> </div>
<button id="submit" type="button" class="btn btn-primary">Submit</button>
</form> </form>
<p></p> <p></p>
</div> </div>
<div id="results"> <div id="results"></div>
</div> <div id="loading"></div>
<div id="loading"></div> <script>
</div> $(function () {
<script> $("#submit").on("click", function () {
$(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,70 +1,79 @@
{% 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 class="panel-group" id="reviewListAccordion"> <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"
Jobs >
</div> <h4 class="panel-title">
<div class="panel-body"> <a
<p> id="job-accordion-link"
Job Logs Desc data-toggle="collapse"
</p> data-parent="#job-accordion"
href="#jobs"
</div> >
Jobs
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver"> </a>
<h4 class="panel-title"> </h4>
<a id="job-accordion-link" data-toggle="collapse" data-parent="#job-accordion" href="#jobs"> </div>
Jobs <div id="jobs" class="panel-collapse in collapse">
</a> <div class="panel-body list-group-item" id="job-content">
</h4> <table class="table-bordered table-hover table">
</div> <tr style="background-color: rgba(0, 0, 0, 0.08);">
<div id="jobs" <th scope="col">ID</th>
class="panel-collapse collapse in"> <th scope="col">Name</th>
<div class="panel-body list-group-item" id="job-content"> <th scope="col">Status</th>
<table class="table table-bordered table-hover"> <th scope="col">Queued</th>
<tr style="background-color: rgba(0, 0, 0, 0.08);"> <th scope="col">Done</th>
<th scope="col">ID</th> <th scope="col">Result</th>
<th scope="col">Name</th> </tr>
<th scope="col">Status</th> <tbody>
<th scope="col">Queued</th> {% for job in jobs %}
<th scope="col">Done</th> <tr>
<th scope="col">Result</th> <td>{{ job.task_id }}</td>
</tr> <td>{{ job.job_name }}</td>
<tbody> <td>{{ job.status }}</td>
{% for job in jobs %} <td>{{ job.created }}</td>
<tr> <td>{{ job.done_at }}</td>
<td>{{ job.task_id }}</td> {% if job.task_result and job.task_result|is_url == True %}
<td>{{ job.job_name }}</td> <td><a href="{{ job.task_result }}">Result</a></td>
<td>{{ job.status }}</td> {% elif job.task_result %}
<td>{{ job.created }}</td> <td>{{ job.task_result|slice:"40" }}...</td>
<td>{{ job.done_at }}</td> {% else %}
{% if job.task_result and job.task_result|is_url == True %} <td>Empty</td>
<td><a href="{{ job.task_result }}">Result</a></td> {% endif %}
{% elif job.task_result %} </tr>
<td>{{ job.task_result|slice:"40" }}...</td> {% endfor %}
{% else %} </tbody>
<td>Empty</td> </table>
{% 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 %}

635
templates/collections/objects_list.html
View File

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

120
templates/compare.html
View File

@ -1,55 +1,75 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% block content %} {% block content %}
<div> <div>
<form action="" method="post"> <form action="" method="post">
{% csrf_token %} {% csrf_token %}
<input type="text" class="form-control" id="smiles" name="smiles" placeholder="SMILES" <input
value="{{ smiles }}"/> type="text"
<input type="text" class="form-control" id="smiles" name="smirks" placeholder="SMIRKS" class="form-control"
value="{{ smirks }}"/> id="smiles"
<button type="submit" class="btn btn-primary">Test</button> name="smiles"
</form> placeholder="SMILES"
</div> value="{{ smiles }}"
{% if result %} />
{{ smiles }}<p></p> <input
<img width='400' src='{% url 'depict' %}?smiles={{ smiles|urlencode }}'><br> type="text"
<p></p> class="form-control"
{% if rule %} id="smiles"
{{ smirks }} name="smirks"
<p></p> placeholder="SMIRKS"
{{ rule.reactants_smarts }} value="{{ smirks }}"
<p></p> />
{{ rule.products_smarts }} <button type="submit" class="btn btn-primary">Test</button>
<p></p> </form>
<div> </div>
{{ rule.as_svg|safe }} {% if result %}
</div> {{ smiles }}
{% endif %} <p></p>
<h2>Diff</h2> <img
{% if diff %} width="400"
{% for d in diff %} src="{% url 'depict' %}?smiles={{ smiles|urlencode }}"
{{ d }} /><br />
{% endfor %} <p></p>
{% else %} {% if rule %}
{{ "No diff" }} {{ smirks }}
{% endif %} <p></p>
<div> {{ rule.reactants_smarts }}
<div class="col-md-6"> <p></p>
<h2>Ambit</h2> {{ rule.products_smarts }}
{% for p in ambit_res %} <p></p>
{{ p }}<br> <div>{{ rule.as_svg|safe }}</div>
<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 %} {% 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,15 +1,18 @@
{% 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 <a target="_blank" You can find out more about permissions in our
href="https://wiki.envipath.org/index.php/packages" <a
role="button">Wiki &gt;&gt;</a></p> target="_blank"
</div> href="https://wiki.envipath.org/index.php/packages"
role="button"
>Wiki &gt;&gt;</a
>
</p>
</div>
{% endblock content %} {% endblock content %}

21
templates/errors/403_access_denied.html
View File

@ -1,15 +1,18 @@
{% 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 <a target="_blank" You can find out more about permissions in our
href="https://wiki.envipath.org/index.php/packages" <a
role="button">Wiki &gt;&gt;</a></p> target="_blank"
</div> href="https://wiki.envipath.org/index.php/packages"
role="button"
>Wiki &gt;&gt;</a
>
</p>
</div>
{% endblock content %} {% endblock content %}

19
templates/errors/404_not_found.html
View File

@ -1,15 +1,18 @@
{% 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 <a target="_blank" You can find out more about permissions in our
href="https://wiki.envipath.org/index.php/packages" <a
role="button">Wiki &gt;&gt;</a></p> target="_blank"
</div> href="https://wiki.envipath.org/index.php/packages"
role="button"
>Wiki &gt;&gt;</a
>
</p>
</div>
{% endblock content %} {% endblock content %}

14
templates/errors/error.html
View File

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

15
templates/errors/user_account_inactive.html
View File

@ -1,12 +1,11 @@
{% extends "framework.html" %} {% extends "framework.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="alert alert-danger" role="alert">
<div class="alert alert-danger" role="alert"> <h4 class="alert-heading">Your account has not been activated yet!</h4>
<h4 class="alert-heading">Your account has not been activated yet!</h4> <p>
<p>Your account has not been activated yet. If you have questions <a href="mailto:admin@envipath.org">contact Your account has not been activated yet. If you have questions
us.</a> <a href="mailto:admin@envipath.org">contact 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="collapse navbar-collapse collapse-framework navbar-collapse-framework" class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
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 collapse in"> <div id="license" class="panel-collapse in collapse">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
<a target="_blank" href="{{ meta.current_package.license.link }}"> <a target="_blank" href="{{ meta.current_package.license.link }}">
<img src="{{ meta.current_package.license.image_link }}" /> <img src="{{ meta.current_package.license.image_link }}" />

25
templates/framework_modern.html
View File

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

97
templates/includes/footer.html
View File

@ -1,19 +1,22 @@
{% load static %} {% load static %}
<div class="lg:max-w-5xl mt-10 mx-auto bg-base-300 text-base-content"> <div class="bg-base-300 text-base-content mx-auto mt-10 lg:max-w-5xl">
<footer class="footer sm:footer-horizontal p-10">
<footer class="footer sm:footer-horizontal p-10"> {% if not public_mode %}
{% if not public_mode %} <nav>
<nav> <h6 class="footer-title">Services</h6>
<h6 class="footer-title">Services</h6> <a class="link link-hover" href="/predict">Predict</a>
<a class="link link-hover" href="/">Predict</a> <a class="link link-hover" href="/package">Packages</a>
<a class="link link-hover" href="/search">Search</a> {% if user.is_authenticated %}
<a class="link link-hover" href="/package">Browse</a> <a class="link link-hover" href="/model">Your Collections</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>
@ -29,39 +32,61 @@
<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-neutral-300 border-t-2 px-10 py-4"> <footer class="footer border-t-2 border-neutral-300 px-10 py-4">
<div class="flex flex-row justify-between w-full items-start"> <div class="flex w-full flex-row items-start justify-between">
<aside class="grid-flow-col items-center"> <aside class="grid-flow-col items-center">
<svg class="fill-neutral-content flex-shrink-0 h-14 m-2" viewbox="0 0 65 65" > <svg
<use class="fill-neutral-content m-2 h-14 flex-shrink-0"
href="{% static "/images/logo-square.svg" %}#ep-logo-square" viewbox="0 0 65 65"
> >
</use> <use
</svg> href="{% static "/images/logo-square.svg" %}#ep-logo-square"
></use>
</svg>
enviPath Ltd. enviPath Ltd.
<br /> <br />
Biodegredation prediction since 2015. Biodegredation prediction since 2015.
</p> </aside>
<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 role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current"> <svg
<title>YouTube</title> role="img"
<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"/> viewBox="0 0 24 24"
</svg> xmlns="http://www.w3.org/2000/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 role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current"> <svg
<title>Discourse</title> role="img"
<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"/> viewBox="0 0 24 24"
</svg> xmlns="http://www.w3.org/2000/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 src="{% static "/images/linkedin.png" %}" alt="LinkedIn" class="w-6 h-6"> <img
src="{% static "/images/linkedin.png" %}"
alt="LinkedIn"
class="h-6 w-6"
/>
</a> </a>
</div> </div>
</nav> </nav>

15
templates/includes/navbar.html
View File

@ -1,9 +1,9 @@
{% load static %} {% load static %}
{# Modern DaisyUI Navbar #} {# Modern DaisyUI Navbar #}
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg x-50"> <div class="navbar x-50 bg-neutral-50 text-neutral-950 shadow-lg">
<div class="navbar-start"> <div class="navbar-start">
<a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl"> <a href="{{ meta.server_url }}" class="btn btn-ghost text-xl normal-case">
<svg class="h-8 fill-base-content" viewBox="0 0 104 26" role="img"> <svg class="fill-base-content h-8" 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,6 +26,9 @@
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>
@ -57,9 +60,9 @@
<div class="navbar-end"> <div class="navbar-end">
{% if not public_mode %} {% if not public_mode %}
<a href="/search" role="button"> <a id="search-trigger" role="button" class="cursor-pointer">
<div <div
class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1" class="badge badge-dash bg-base-200 text-base-content/50 m-1 flex items-center space-x-1 p-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -87,7 +90,7 @@
<div <div
tabindex="0" tabindex="0"
role="button" role="button"
class="btn btn-ghost m-1 btn-circle" class="btn btn-ghost btn-circle m-1"
id="loggedInButton" id="loggedInButton"
> >
<svg <svg

148
templates/index/index.html
View File

@ -2,74 +2,86 @@
{% 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 h-fit max-w-5xl w-full shadow-none mx-auto relative"> <section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
<div <div
class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600" class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br"
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 -translate-x-8 z-10"> <div class="absolute bottom-40 left-1/8 z-10 -translate-x-8">
<h2 class="text-3xl text-base-100 text-shadow-lg text-left"> <h2 class="text-base-100 text-left text-3xl text-shadow-lg">
Predict Your Pathway Predict Your Pathway
</h2> </h2>
</div> </div>
</div> </div>
</section> </section>
<div class="shadow-md max-w-5xl mx-auto bg-base-200"> <div class="bg-base-200 mx-auto max-w-5xl shadow-md">
<!-- Predict Pathway Section --> <!-- Predict Pathway Section -->
<div <div
class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 " class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
> >
<div <div
class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out" class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
> >
<div class="card-body"> <div class="card-body">
<!-- Input Mode Toggle - Fixed position outside fieldset --> <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
<div class="flex flex-row justify-start items-center h-fit ml-8 my-4"> <div class="flex items-center gap-1">
<div class="flex items-center gap-2"> <label class="swap btn btn-ghost btn-sm p-1" title="Input Mode">
<!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
<label class="toggle text-base-content toggle-md">
<input type="checkbox" /> <input type="checkbox" />
<svg <span class="swap-on flex items-center gap-1">
aria-label="smiles mode" <div
xmlns="http://www.w3.org/2000/svg" class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
viewBox="0 0 20 20"
class="size-5"
>
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
fill="currentColor"
stroke="none"
> >
<path <svg
fill-rule="evenodd" aria-label="smiles mode"
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" xmlns="http://www.w3.org/2000/svg"
clip-rule="evenodd" viewBox="0 0 20 20"
/> class="size-5"
</g> >
</svg> <g
<svg stroke-linejoin="round"
aria-label="draw mode" stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" stroke-width="2"
viewBox="0 0 20 20" fill="currentColor"
fill="currentColor" stroke="none"
stroke="none" >
class="size-5" <path
> fill-rule="evenodd"
<path 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"
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" clip-rule="evenodd"
/> />
</svg> </g>
</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 transition-all duration-300 ease-in-out overflow-hidden" class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
> >
<form <form
id="index-form" id="index-form"
@ -79,29 +91,29 @@
{% csrf_token %} {% csrf_token %}
<div <div
id="text-input-container" id="text-input-container"
class="transition-all duration-300 ease-in-out opacity-100 transform scale-100" class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out"
> >
<div class="join w-full mx-auto"> <div class="join mx-auto w-full">
<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 grow input-md join-item" class="input input-md join-item grow"
/> />
<button class="btn btn-neutral join-item">Predict!</button> <button class="btn btn-neutral join-item">Predict!</button>
</div> </div>
<div class="label relative w-full mt-1"> <div class="label relative mt-1 w-full">
<div class="flex gap-2"> <div class="flex gap-2">
<a <a
href="#" href="#"
class="example-link cursor-pointer hover:text-primary" class="example-link hover:text-primary cursor-pointer"
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 cursor-pointer hover:text-primary" class="example-link hover:text-primary cursor-pointer"
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
@ -114,7 +126,7 @@
</div> </div>
<div <div
id="ketcher-container" id="ketcher-container"
class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95" class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out"
> >
<iframe <iframe
id="index-ketcher" id="index-ketcher"
@ -124,11 +136,13 @@
class="rounded-lg" class="rounded-lg"
></iframe> ></iframe>
<button <button
class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2" class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
> >
Predict! Predict!
</button> </button>
<a class="label mx-auto w-full mt-1" href="#">Advanced</a> <div class="mt-1 flex w-full justify-end">
<a class="label justify-end" href="/predict">Advanced</a>
</div>
</div> </div>
<input <input
type="hidden" type="hidden"
@ -150,18 +164,18 @@
</div> </div>
<!-- Community News Section --> <!-- Community News Section -->
<section class="py-16 bg-base-200 z-10 mx-8"> <section class="bg-base-200 z-10 mx-8 py-16">
<div class="max-w-7xl mx-auto px-4"> <div class="mx-auto max-w-7xl px-4">
<h2 class="h2 font-bold text-left mb-8">Community Updates</h2> <h2 class="h2 mb-8 text-left font-bold">Community Updates</h2>
<div id="community-news-container" class="flex gap-4 justify-center"> <div id="community-news-container" class="flex justify-center gap-4">
<!-- News cards will be populated here --> <!-- News cards will be populated here -->
<div id="loading" class="flex justify-center w-full"> <div id="loading" class="flex w-full justify-center">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
</div> </div>
<div class="text-right mt-6"> <div class="mt-6 text-right">
<a <a
href="https://community.envipath.org/c/announcements/10" href="https://community.envipath.org/c/announcements/10"
target="_blank" target="_blank"
@ -177,18 +191,18 @@
</section> </section>
<!-- Mission Statement Section --> <!-- Mission Statement Section -->
<section class="py-16 from-base-200 to-base-100 bg-gradient-to-b"> <section class="from-base-200 to-base-100 bg-gradient-to-b py-16">
<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="w-full h-full object-contain" class="h-full w-full object-contain"
/> />
</div> </div>
<div class="space-y-4 text-left w-2/3 mr-8"> <div class="mr-8 w-2/3 space-y-4 text-left">
<h2 class="h2 font-bold mb-8">About enviPath</h2> <h2 class="h2 mb-8 font-bold">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
@ -201,7 +215,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="flex flex-row gap-4 float-right"> <div class="float-right flex flex-row gap-4">
<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>
@ -211,7 +225,7 @@
</section> </section>
<!-- Partners Section --> <!-- Partners Section -->
<section class="py-14 sm:py-12 bg-base-100"> <section class="bg-base-100 py-14 sm:py-12">
<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>
@ -222,12 +236,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,44 +1,71 @@
{% 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 class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px"> <div
Migration Status BT Rules class="panel-heading"
</div> id="headingPanel"
<div class="panel-body"> style="font-size:2rem;height: 46px"
<p>Rules with Error: {{ error }}/{{ total }} </p> >
<p>Rules without Error: {{ success }}/{{ total }}</p> Migration Status BT Rules
</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 class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
{% if obj.status %} class="panel panel-default panel-heading list-group-item"
<span class="glyphicon glyphicon-ok" aria-hidden="true" style="background-color:silver"
style="float:right" data-toggle="tooltip" >
data-placement="top" title="" data-original-title="Reviewed"> {% if obj.status %}
<span
class="glyphicon glyphicon-ok"
aria-hidden="true"
style="float:right"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Reviewed"
>
</span> </span>
{% else %} {% else %}
<span class="glyphicon glyphicon-remove" aria-hidden="true" <span
style="float:right" data-toggle="tooltip" class="glyphicon glyphicon-remove"
data-placement="top" title="" data-original-title="Reviewed"> aria-hidden="true"
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 id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail" <a
href="#{{ obj.id }}">{{ obj.name|safe }}</a> id="{{ obj.id }}-link"
</h4> data-toggle="collapse"
data-parent="#migration-detail"
href="#{{ obj.id }}"
>{{ obj.name|safe }}</a
>
</h4>
</div> </div>
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}"> <div
<div class="panel-body list-group-item"> id="{{ obj.id }}"
<a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name|safe }} Migration Detail Page</a> class="panel-collapse {% if not obj.status %}in{% endif %} collapse"
</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,45 +1,77 @@
{% 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 class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px"> <div
Migration Status for {{ bt_rule_name }} class="panel-heading"
</div> id="headingPanel"
<div class="panel-body"> style="font-size:2rem;height: 46px"
<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 Migration Status for {{ bt_rule_name }}
more &gt;&gt;</a></p> </div>
</div> <div class="panel-body">
<p>
A package contains pathways, rules, etc. and can reflect specific
experimental conditions.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/packages"
role="button"
>Learn more &gt;&gt;</a
>
</p>
</div>
{% for obj in results %} {% for obj in results %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
{% if obj.status %} class="panel panel-default panel-heading list-group-item"
<span class="glyphicon glyphicon-ok" aria-hidden="true" style="background-color:silver"
style="float:right" data-toggle="tooltip" >
data-placement="top" title="" data-original-title="Reviewed"> {% if obj.status %}
</span> <span
{% else %} class="glyphicon glyphicon-ok"
<span class="glyphicon glyphicon-remove" aria-hidden="true" aria-hidden="true"
style="float:right" data-toggle="tooltip" style="float:right"
data-placement="top" title="" data-original-title="Reviewed"> data-toggle="tooltip"
</span> data-placement="top"
{% endif %} title=""
<h4 class="panel-title"> data-original-title="Reviewed"
<a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail" >
href="#{{ obj.id }}">{{ obj.name|safe }}</a> </span>
</h4> {% else %}
</div> <span
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}"> class="glyphicon glyphicon-remove"
<div class="panel-body list-group-item"> aria-hidden="true"
<pre>{{ obj.detail }}</pre> style="float:right"
</div> data-toggle="tooltip"
</div> data-placement="top"
{% endfor %} title=""
data-original-title="Reviewed"
>
</span>
{% endif %}
<h4 class="panel-title">
<a
id="{{ obj.id }}-link"
data-toggle="collapse"
data-parent="#migration-detail"
href="#{{ obj.id }}"
>{{ obj.name|safe }}</a
>
</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,31 +1,48 @@
<div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" <div
aria-hidden="true"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="citemodal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> role="dialog"
<h3>How to cite enviPath</h3> aria-labelledby="myLargeModalLabel"
</div> aria-hidden="true"
<div class="modal-body"> >
<ol class="list-group list-group-numbered"> <div class="modal-dialog modal-lg">
<li class="list-group-item"> <div class="modal-content">
Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em> <div class="modal-header">
<cite>Advancements in biotransformation pathway prediction: enhancements, datasets, and novel <h3>How to cite enviPath</h3>
functionalities in enviPath.</cite> </div>
<a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank">J Cheminform 16, 93 <div class="modal-body">
(2024)</a> <ol class="list-group list-group-numbered">
</li> <li class="list-group-item">
<li class="list-group-item"> Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., Kramer, S., Fenner, K. <cite
<cite>enviPath - The environmental contaminant biotransformation pathway resource</cite> >Advancements in biotransformation pathway prediction:
<a href="https://doi.org/10.1093/nar/gkv1229" target="_blank"> enhancements, datasets, and novel functionalities in
Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages D502-D508 enviPath.</cite
</a> >
</li> <a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank"
</ol> >J Cheminform 16, 93 (2024)</a
</div> >
<div class="modal-footer"> </li>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <li class="list-group-item">
</div> Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D.,
</div> Kramer, S., Fenner, K.
<cite
>enviPath - The environmental contaminant biotransformation
pathway resource</cite
>
<a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages
D502-D508
</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,42 +1,70 @@
<div class="modal fade" tabindex="-1" id="import_legacy_package_modal" role="dialog" <div
aria-labelledby="import_legacy_package_modal" aria-hidden="true"> class="modal fade"
<div class="modal-dialog"> tabindex="-1"
<div class="modal-content"> id="import_legacy_package_modal"
<div class="modal-header"> role="dialog"
<button type="button" class="close" data-dismiss="modal"> aria-labelledby="import_legacy_package_modal"
<span aria-hidden="true">&times;</span> aria-hidden="true"
<span class="sr-only">Close</span> >
</button> <div class="modal-dialog">
<h4 class="modal-title">Import Package from legacy System</h4> <div class="modal-content">
</div> <div class="modal-header">
<div class="modal-body"> <button type="button" class="close" data-dismiss="modal">
<p>Create a Package based on the JSON Export of the legacy system.</p> <span aria-hidden="true">&times;</span>
<form id="import-legacy-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post" <span class="sr-only">Close</span>
enctype="multipart/form-data"> </button>
{% csrf_token %} <h4 class="modal-title">Import Package from legacy System</h4>
<p> </div>
<label class="btn btn-primary" for="legacyJsonFile"> <div class="modal-body">
<input id="legacyJsonFile" name="file" type="file" style="display:none;" <p>Create a Package based on the JSON Export of the legacy system.</p>
onchange="$('#upload-legacy-file-info').html(this.files[0].name)"> <form
Choose JSON File id="import-legacy-package-modal-form"
</label> accept-charset="UTF-8"
<span class="label label-info" id="upload-legacy-file-info"></span> data-remote="true"
<input type="hidden" value="import-legacy-package-json" name="hidden" readonly=""> method="post"
</p> enctype="multipart/form-data"
</form> >
</div> {% csrf_token %}
<div class="modal-footer"> <p>
<a id="import-legacy-package-modal-form-submit" class="btn btn-primary" href="#">Submit</a> <label class="btn btn-primary" for="legacyJsonFile">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <input
</div> id="legacyJsonFile"
</div> name="file"
type="file"
style="display:none;"
onchange="$('#upload-legacy-file-info').html(this.files[0].name)"
/>
Choose JSON File
</label>
<span class="label label-info" id="upload-legacy-file-info"></span>
<input
type="hidden"
value="import-legacy-package-json"
name="hidden"
readonly=""
/>
</p>
</form>
</div>
<div class="modal-footer">
<a
id="import-legacy-package-modal-form-submit"
class="btn btn-primary"
href="#"
>Submit</a
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </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,42 +1,70 @@
<div class="modal fade" tabindex="-1" id="import_package_modal" role="dialog" <div
aria-labelledby="import_package_modal" aria-hidden="true"> class="modal fade"
<div class="modal-dialog"> tabindex="-1"
<div class="modal-content"> id="import_package_modal"
<div class="modal-header"> role="dialog"
<button type="button" class="close" data-dismiss="modal"> aria-labelledby="import_package_modal"
<span aria-hidden="true">&times;</span> aria-hidden="true"
<span class="sr-only">Close</span> >
</button> <div class="modal-dialog">
<h4 class="modal-title">Import Package</h4> <div class="modal-content">
</div> <div class="modal-header">
<div class="modal-body"> <button type="button" class="close" data-dismiss="modal">
<p>Create a Package based on a JSON Export.</p> <span aria-hidden="true">&times;</span>
<form id="import-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post" <span class="sr-only">Close</span>
enctype="multipart/form-data"> </button>
{% csrf_token %} <h4 class="modal-title">Import Package</h4>
<p> </div>
<label class="btn btn-primary" for="jsonFile"> <div class="modal-body">
<input id="jsonFile" name="file" type="file" style="display:none;" <p>Create a Package based on a JSON Export.</p>
onchange="$('#upload-file-info').html(this.files[0].name)"> <form
Choose JSON File id="import-package-modal-form"
</label> accept-charset="UTF-8"
<span class="label label-info" id="upload-file-info"></span> data-remote="true"
<input type="hidden" value="import-package-json" name="hidden" readonly=""> method="post"
</p> enctype="multipart/form-data"
</form> >
</div> {% csrf_token %}
<div class="modal-footer"> <p>
<a id="import-package-modal-form-submit" class="btn btn-primary" href="#">Submit</a> <label class="btn btn-primary" for="jsonFile">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <input
</div> id="jsonFile"
</div> name="file"
type="file"
style="display:none;"
onchange="$('#upload-file-info').html(this.files[0].name)"
/>
Choose JSON File
</label>
<span class="label label-info" id="upload-file-info"></span>
<input
type="hidden"
value="import-package-json"
name="hidden"
readonly=""
/>
</p>
</form>
</div>
<div class="modal-footer">
<a
id="import-package-modal-form-submit"
class="btn btn-primary"
href="#"
>Submit</a
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </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,78 +1,119 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="new_compound_modal" tabindex="-1" aria-labelledby="new_compound_modal" aria-modal="true" <div
role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="new_compound_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="new_compound_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">×</span> role="dialog"
</button> >
<h4 class="modal-title">Create a new Compound</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<form id="new_compound_modal_form" accept-charset="UTF-8" action="{% url 'package compound list' meta.current_package.uuid %}" data-remote="true" method="post"> <button
{% csrf_token %} type="button"
<label for="compound-name">Name</label> class="close"
<input id="compound-name" class="form-control" name="compound-name" placeholder="Name"/> data-dismiss="modal"
<label for="compound-description">Description</label> aria-label="Close"
<input id="compound-description" class="form-control" name="compound-description" placeholder="Description"/> >
<label for="compound-smiles">SMILES</label> <span aria-hidden="true">×</span>
<input type="text" class="form-control" name="compound-smiles" placeholder="SMILES" id="compound-smiles"> </button>
<p></p> <h4 class="modal-title">Create a new Compound</h4>
<div> </div>
<iframe id="new_compound_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%" <div class="modal-body">
height="510"></iframe> <form
</div> id="new_compound_modal_form"
<p></p> accept-charset="UTF-8"
</form> action="{% url 'package compound 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_compound_modal_form_submit">Submit</button> <label for="compound-name">Name</label>
</div> <input
</div> id="compound-name"
class="form-control"
name="compound-name"
placeholder="Name"
/>
<label for="compound-description">Description</label>
<input
id="compound-description"
class="form-control"
name="compound-description"
placeholder="Description"
/>
<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 newCompoundModalketcherToNewCompoundModalTextInput() { $(function () {
$('#compound-smiles').val(this.ketcher.getSmiles()); $("#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);
}
};
$(function() { checkKetcherReady();
$('#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,45 +1,70 @@
<div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal" <div
aria-hidden="true"> class="modal fade"
<div class="modal-dialog"> tabindex="-1"
<div class="modal-content"> id="new_group_modal"
<div class="modal-header"> role="dialog"
<button type="button" class="close" data-dismiss="modal"> aria-labelledby="new_group_modal"
<span aria-hidden="true">&times;</span> aria-hidden="true"
<span class="sr-only">Close</span> >
</button> <div class="modal-dialog">
<h4 class="modal-title">New Group</h4> <div class="modal-content">
</div> <div class="modal-header">
<div class="modal-body"> <button type="button" class="close" data-dismiss="modal">
<p>Create new Group. You can assign users to the group once <span aria-hidden="true">&times;</span>
it is created. Description can be changed after creation.</p> <span class="sr-only">Close</span>
<form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group" </button>
data-remote="true" <h4 class="modal-title">New Group</h4>
method="post"> </div>
{% csrf_token %} <div class="modal-body">
<p> <p>
<label for="name">Name</label> Create new Group. You can assign users to the group once it is
<input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/> created. Description can be changed after creation.
</p> </p>
<p> <form
<label for="description">Description</label> id="new_group_modal_form"
<input id="description" type="text" class="form-control" placeholder="Description..." accept-charset="UTF-8"
name="group-description"/> action="{{ SERVER_BASE }}/group"
</p> data-remote="true"
</form> method="post"
</div> >
<div class="modal-footer"> {% csrf_token %}
<a id="new_group_modal_form_submit" class="btn btn-primary" href="#">Submit</a> <p>
<button type="button" class="btn btn-default" data-dismiss="modal"> <label for="name">Name</label>
Cancel <input
</button> id="name"
</div> type="text"
</div> name="group-name"
class="form-control"
placeholder="Name"
/>
</p>
<p>
<label for="description">Description</label>
<input
id="description"
type="text"
class="form-control"
placeholder="Description..."
name="group-description"
/>
</p>
</form>
</div>
<div class="modal-footer">
<a id="new_group_modal_form_submit" class="btn btn-primary" href="#"
>Submit</a
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div> </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,188 +1,270 @@
<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"
/>
<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal" <!-- Description -->
aria-hidden="true"> <label for="model-description">Description</label>
<div class="modal-dialog modal-lg"> <input
<div class="modal-content"> id="model-description"
<div class="modal-header"> name="model-description"
<button type="button" class="close" data-dismiss="modal"> class="form-control"
<span aria-hidden="true">&times;</span> placeholder="Description"
<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 --> <!-- Model Type -->
<label for="model-description">Description</label> <label for="model-type">Model Type</label>
<input id="model-description" name="model-description" class="form-control" <select
placeholder="Description"/> id="model-type"
name="model-type"
class="form-control"
data-width="100%"
>
<option disabled selected>Select Model Type</option>
{% for k, v in model_types.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
</select>
<!-- Model Type --> <!-- Rule Packages -->
<label for="model-type">Model Type</label> <div id="rule-packages" class="ep-model-param mlrr rbrr">
<select id="model-type" name="model-type" class="form-control" data-width='100%'> <label for="model-rule-packages">Rule Packages</label>
<option disabled selected>Select Model Type</option> <select
{% for k, v in model_types.items %} id="model-rule-packages"
<option value="{{ v }}">{{ k }}</option> name="model-rule-packages"
{% endfor %} data-actions-box="true"
</select> 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 %}
<!-- Rule Packages --> <option disabled>Unreviewed Packages</option>
<div id="rule-packages" class="ep-model-param mlrr rbrr"> {% for obj in meta.readable_packages %}
<label for="model-rule-packages">Rule Packages</label> {% if not obj.reviewed %}
<select id="model-rule-packages" name="model-rule-packages" data-actions-box='true' <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
class="form-control" multiple data-width='100%'> {% endif %}
<option disabled>Reviewed Packages</option> {% endfor %}
{% for obj in meta.readable_packages %} </select>
{% if obj.reviewed %} </div>
<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
{% endif %} id="model-data-packages"
{% endfor %} name="model-data-packages"
</select> data-actions-box="true"
</div> 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 %}
<!-- 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 id="model-data-packages" name="model-data-packages" data-actions-box='true' <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
class="form-control" multiple data-width='100%'> {% endif %}
<option disabled>Reviewed Packages</option> {% endfor %}
{% for obj in meta.readable_packages %} </select>
{% if obj.reviewed %} </div>
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option> <!-- Fingerprinter -->
{% for obj in meta.readable_packages %} <div id="fingerprinter" class="ep-model-param mlrr">
{% if not obj.reviewed %} <label for="model-fingerprinter">Fingerprinter</label>
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <select
{% endif %} id="model-fingerprinter"
{% endfor %} name="model-fingerprinter"
</select> data-actions-box="true"
</div> class="form-control"
multiple
data-width="100%"
>
<option value="MACCS" selected>MACCS Fingerprinter</option>
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
<option disabled selected>
Select Additional Fingerprinter / Descriptor
</option>
{% for k, v in additional_descriptors.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<!-- Fingerprinter --> <!-- Threshold -->
<div id="fingerprinter" class="ep-model-param mlrr"> <div id="threshold" class="ep-model-param mlrr enviformer">
<label for="model-fingerprinter">Fingerprinter</label> <label for="model-threshold">Threshold</label>
<select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true' <input
class="form-control" multiple data-width='100%'> type="number"
<option value="MACCS" selected>MACCS Fingerprinter</option> min="0"
{% if meta.enabled_features.PLUGINS and additional_descriptors %} max="1"
<option disabled selected>Select Additional Fingerprinter / Descriptor</option> step="0.05"
{% for k, v in additional_descriptors.items %} value="0.5"
<option value="{{ v }}">{{ k }}</option> id="model-threshold"
{% endfor %} name="model-threshold"
{% endif %} class="form-control"
</select> />
</div> </div>
<!-- Threshold --> <div id="appdomain" class="ep-model-param mlrr">
<div id="threshold" class="ep-model-param mlrr enviformer"> {% if meta.enabled_features.APPLICABILITY_DOMAIN %}
<label for="model-threshold">Threshold</label> <!-- Build AD? -->
<input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold" <div class="checkbox">
name="model-threshold" class="form-control"> <label>
</div> <input
type="checkbox"
<div id="appdomain" class="ep-model-param mlrr"> id="build-app-domain"
{% if meta.enabled_features.APPLICABILITY_DOMAIN %} name="build-app-domain"
<!-- Build AD? --> />Also build an Applicability Domain?
<div class="checkbox"> </label>
<label> </div>
<input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an <div id="ad-params" style="display:none">
Applicability Domain? <!-- Num Neighbors -->
</label> <label for="num-neighbors">Number of Neighbors</label>
</div> <input
<div id="ad-params" style="display:none"> id="num-neighbors"
<!-- Num Neighbors --> name="num-neighbors"
<label for="num-neighbors">Number of Neighbors</label> type="number"
<input id="num-neighbors" name="num-neighbors" type="number" class="form-control" class="form-control"
value="5" value="5"
step="1" min="0" max="10"> step="1"
<!-- Local Compatibility --> min="0"
<label for="local-compatibility-threshold">Local Compatibility Threshold</label> max="10"
<input id="local-compatibility-threshold" name="local-compatibility-threshold" />
type="number" <!-- Local Compatibility -->
class="form-control" value="0.5" step="0.01" min="0" max="1"> <label for="local-compatibility-threshold"
<!-- Reliability --> >Local Compatibility Threshold</label
<label for="reliability-threshold">Reliability Threshold</label> >
<input id="reliability-threshold" name="reliability-threshold" type="number" <input
class="form-control" value="0.5" step="0.01" min="0" max="1"> id="local-compatibility-threshold"
</div> name="local-compatibility-threshold"
{% endif %} type="number"
</div> class="form-control"
</form> value="0.5"
</div> step="0.01"
<div class="modal-footer"> min="0"
<a id="new_model_modal_form_submit" class="btn btn-primary" href="#">Submit</a> max="1"
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> />
</div> <!-- Reliability -->
</div> <label for="reliability-threshold">Reliability Threshold</label>
<input
id="reliability-threshold"
name="reliability-threshold"
type="number"
class="form-control"
value="0.5"
step="0.01"
min="0"
max="1"
/>
</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 = [ var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];
"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,62 +1,68 @@
<div class="modal fade" <div
tabindex="-1" class="modal fade"
id="new_package_modal" tabindex="-1"
role="dialog" id="new_package_modal"
aria-labelledby="new_package_modal" role="dialog"
aria-hidden="true"> aria-labelledby="new_package_modal"
<div class="modal-dialog"> aria-hidden="true"
<div class="modal-content"> >
<div class="modal-header"> <div class="modal-dialog">
<button type="button" <div class="modal-content">
class="close" <div class="modal-header">
data-dismiss="modal"> <button type="button" class="close" 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 id="new_package_modal_form" <form
accept-charset="UTF-8" id="new_package_modal_form"
action="" accept-charset="UTF-8"
data-remote="true" action=""
method="post"> data-remote="true"
{% csrf_token %} method="post"
<p> >
<label for="name">Name</label> {% csrf_token %}
<input id="name" class="form-control" <p>
name="package-name" <label for="name">Name</label>
placeholder="Name"/> <input
</p> id="name"
<p> class="form-control"
<label for="description">Description</label> name="package-name"
<input id="description" placeholder="Name"
type="text" />
rows="3" </p>
class="form-control" <p>
placeholder="Description..." <label for="description">Description</label>
name="package-description"/> <input
</p> id="description"
</form> type="text"
</div> rows="3"
<div class="modal-footer"> class="form-control"
<a id="new_package_modal_form_submit" placeholder="Description..."
class="btn btn-primary" name="package-description"
href="#">Submit</a> />
<button type="button" </p>
class="btn btn-default" </form>
data-dismiss="modal">Cancel </div>
</button> <div class="modal-footer">
</div> <a id="new_package_modal_form_submit" class="btn btn-primary" href="#"
</div> >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_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>

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

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

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

@ -1,109 +1,185 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<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" <span aria-hidden="true">&times;</span>
method="post"> </button>
{% csrf_token %} </div>
<div class="modal-body">
<p>
To create a Prediction Setting fill the form below and click "Create"
</p>
<form
id="new-prediction-setting-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="prediction-setting-name">Name</label> <label for="prediction-setting-name">Name</label>
<input id="prediction-setting-name" name="prediction-setting-name" class="form-control" placeholder="Name"/> <input
<label for="prediction-setting-description">Description</label> id="prediction-setting-name"
<input id="prediction-setting-description" name="prediction-setting-description" class="form-control" name="prediction-setting-name"
placeholder="Description"/> class="form-control"
placeholder="Name"
/>
<label for="prediction-setting-description">Description</label>
<input
id="prediction-setting-description"
name="prediction-setting-description"
class="form-control"
placeholder="Description"
/>
<label for="prediction-setting-max-nodes">Max #Nodes</label> <label for="prediction-setting-max-nodes">Max #Nodes</label>
<input id="prediction-setting-max-nodes" type="number" class="form-control" name="prediction-setting-max-nodes" value="30" min="1" max="50" step="1"> <input
<label for="prediction-setting-max-depth">Max Depth</label> id="prediction-setting-max-nodes"
<input id="prediction-setting-max-depth" type="number" class="form-control" name="prediction-setting-max-depth" value="5" min="1" max="8" step="1"> type="number"
class="form-control"
name="prediction-setting-max-nodes"
value="30"
min="1"
max="50"
step="1"
/>
<label for="prediction-setting-max-depth">Max Depth</label>
<input
id="prediction-setting-max-depth"
type="number"
class="form-control"
name="prediction-setting-max-depth"
value="5"
min="1"
max="8"
step="1"
/>
<label for="tp-generation-method">TP Generation Method</label> <label for="tp-generation-method">TP Generation Method</label>
<select id="tp-generation-method" name="tp-generation-method" class="form-control" data-width='100%'> <select
<option disabled selected>Select how TPs are generated</option> id="tp-generation-method"
<option value="rule-based-prediction-setting">Rule Based</option> name="tp-generation-method"
<option value="model-based-prediction-setting">Model Based</option> class="form-control"
</select> data-width="100%"
<div id="rule-based-prediction-setting-specific-form"> >
<!-- Rule Packages --> <option disabled selected>Select how TPs are generated</option>
<label>Rule Packages</label><br> <option value="rule-based-prediction-setting">Rule Based</option>
<select id="rule-based-prediction-setting-packages" name="rule-based-prediction-setting-packages" <option value="model-based-prediction-setting">Model Based</option>
data-actions-box='true' class="form-control" multiple data-width='100%'> </select>
<option disabled>Reviewed Packages</option> <div id="rule-based-prediction-setting-specific-form">
{% for obj in meta.readable_packages %} <!-- Rule Packages -->
{% if obj.reviewed %} <label>Rule Packages</label><br />
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> <select
{% endif %} id="rule-based-prediction-setting-packages"
{% endfor %} name="rule-based-prediction-setting-packages"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option disabled>Reviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if obj.reviewed %}
<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 id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'> <select
<option disabled selected>Select the model</option> id="model-based-prediction-setting-model"
{% for m in models %} name="model-based-prediction-setting-model"
<option value="{{ m.url }}">{{ m.name|safe }}</option> class="form-control"
{% endfor %} data-width="100%"
</select> >
<label for="model-based-prediction-setting-threshold">Threshold</label> <option disabled selected>Select the model</option>
<input id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="form-control" placeholder="0.25" type="number"/> {% for m in models %}
</div> <option value="{{ m.url }}">{{ m.name|safe }}</option>
{% endfor %}
</select>
<label for="model-based-prediction-setting-threshold"
>Threshold</label
>
<input
id="model-based-prediction-setting-threshold"
name="model-based-prediction-setting-threshold"
class="form-control"
placeholder="0.25"
type="number"
/>
</div>
<input class="form-check-input" type="checkbox" value="on" id="prediction-setting-new-default" name="prediction-setting-new-default"> <input
<label class="form-check-label" for="prediction-setting-new-default">Set this setting as new default</label> class="form-check-input"
type="checkbox"
</form> value="on"
</div> id="prediction-setting-new-default"
<div class="modal-footer"> name="prediction-setting-new-default"
<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> <label class="form-check-label" for="prediction-setting-new-default"
</div> >Set this setting as new default</label
</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();
});
// Initially hide all "specific" forms $("#rule-based-prediction-setting-packages").selectpicker();
$("div[id$='-specific-form']").each( function() {
$(this).hide();
});
$("#rule-based-prediction-setting-packages").selectpicker(); // On change hide all and show only selected
$("#tp-generation-method").change(function () {
$("div[id$='-specific-form']").each(function () {
$(this).hide();
});
val = $("option:selected", this).val();
$("#" + val + "-specific-form").show();
});
// On change hide all and show only selected $("#new-prediction-setting-modal-submit").click(function (e) {
$("#tp-generation-method").change(function() { e.preventDefault();
$("div[id$='-specific-form']").each( function() { // $('#new-prediction-setting-modal-form').submit();
$(this).hide();
});
val = $('option:selected', this).val();
$("#" + val + "-specific-form").show();
});
$('#new-prediction-setting-modal-submit').click(function(e){ const formData = $("#new-prediction-setting-modal-form").serialize();
e.preventDefault(); $.post("/setting", formData, function (response) {
// $('#new-prediction-setting-modal-form').submit(); location.reload();
});
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,50 +1,91 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="new_reaction_modal" tabindex="-1" aria-labelledby="new_reaction_modal" aria-modal="true" <div
role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="new_reaction_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="new_reaction_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">×</span> role="dialog"
</button> >
<h4 class="modal-title">Create a new Reaction</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<form id="new_reaction_modal_form" accept-charset="UTF-8" action="{% url 'package reaction list' meta.current_package.uuid %}" data-remote="true" method="post"> <button
{% csrf_token %} type="button"
<label for="reaction-name">Name</label> class="close"
<input id="reaction-name" class="form-control" name="reaction-name" placeholder="Name"/> data-dismiss="modal"
<label for="reaction-description">Description</label> aria-label="Close"
<input id="reaction-description" class="form-control" name="reaction-description" placeholder="Description"/> >
<p></p> <span aria-hidden="true">×</span>
<div> </button>
<iframe id="new_reaction_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%" <h4 class="modal-title">Create a new Reaction</h4>
height="510"></iframe> </div>
</div> <div class="modal-body">
<input type="hidden" name="reaction-smirks" id="reaction-smirks"> <form
<p></p> id="new_reaction_modal_form"
</form> accept-charset="UTF-8"
</div> action="{% url 'package reaction 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_reaction_modal_form_submit">Submit</button> {% csrf_token %}
</div> <label for="reaction-name">Name</label>
</div> <input
id="reaction-name"
class="form-control"
name="reaction-name"
placeholder="Name"
/>
<label for="reaction-description">Description</label>
<input
id="reaction-description"
class="form-control"
name="reaction-description"
placeholder="Description"
/>
<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,72 +1,120 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="new_rule_modal" tabindex="-1" aria-labelledby="new_rule_modal" aria-modal="true" <div
role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="new_rule_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="new_rule_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">×</span> role="dialog"
</button> >
<h4 class="modal-title">Create a new Rule</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<form id="new_rule_modal_form" accept-charset="UTF-8" action="{% url 'package rule list' meta.current_package.uuid %}" data-remote="true" method="post"> <button
{% csrf_token %} type="button"
<label for="rule-name">Name</label> class="close"
<input id="rule-name" class="form-control" name="rule-name" placeholder="Name"/> data-dismiss="modal"
<label for="rule-description">Description</label> aria-label="Close"
<input id="rule-description" class="form-control" name="rule-description" placeholder="Description"/> >
<label for="rule-smirks">SMIRKS</label> <span aria-hidden="true">×</span>
<input id="rule-smirks" class="form-control" name="rule-smirks" placeholder="SMIRKS"/> </button>
<p></p> <h4 class="modal-title">Create a new Rule</h4>
<div id="rule-smirks-viz"></div> </div>
<input type="hidden" name="rule-type" id="rule-type" value="SimpleAmbitRule"> <div class="modal-body">
<p></p> <form
</form> id="new_rule_modal_form"
</div> accept-charset="UTF-8"
<div class="modal-footer"> action="{% url 'package rule list' meta.current_package.uuid %}"
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close data-remote="true"
</button> method="post"
<button type="button" class="btn btn-primary" id="new_rule_modal_form_submit">Submit</button> >
</div> {% csrf_token %}
</div> <label for="rule-name">Name</label>
<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();
$('#rule-smirks').on('input', function(e) { smirks = $("#rule-smirks").val();
$('#rule-smirks-viz').empty()
smirks = $('#rule-smirks').val() const img = new Image();
img.src =
"{% url 'depict' %}?is_query_smirks=true&smirks=" +
encodeURIComponent(smirks);
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "cover";
const img = new Image(); img.onload = function () {
img.src = "{% url 'depict' %}?is_query_smirks=true&smirks=" + encodeURIComponent(smirks); $("#rule-smirks-viz").append(img);
img.style.width = '100%'; };
img.style.height = '100%';
img.style.objectFit = 'cover';
img.onload = function () { img.onerror = function () {
$('#rule-smirks-viz').append(img); error_tpl = `
};
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>

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

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

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

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

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

@ -1,127 +1,174 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal" <div
aria-modal="true" class="modal fade bs-modal-lg"
role="dialog"> id="add_pathway_edge_modal"
<div class="modal-dialog modal-lg"> tabindex="-1"
<div class="modal-content"> aria-labelledby="add_pathway_edge_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 Reaction</h4> <div class="modal-content">
<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="modal-body"> <div class="col-xs-2"></div>
<form id="add_pathway_edge_modal_form" accept-charset="UTF-8" <div class="col-xs-5">
action="{% url 'package pathway edge list' meta.current_package.uuid pathway.uuid %}" <legend>Product(s)</legend>
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 class="modal-footer"> </div>
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close <div class="row">
</button> <div class="col-xs-5">
<button type="button" class="btn btn-primary" id="add_pathway_edge_modal_form_submit">Submit</button> <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>
</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() {
function reactionImage() { var substrates = [];
var substrates = []; $("#add_pathway_edge_substrates option:selected").each(function () {
$('#add_pathway_edge_substrates option:selected').each(function () { var smiles = $(this).data("smiles"); // read data-smiles attribute
var smiles = $(this).data('smiles'); // read data-smiles attribute substrates.push(smiles);
substrates.push(smiles);
});
var products = []
$('#add_pathway_edge_products option:selected').each(function () {
var smiles = $(this).data('smiles'); // read data-smiles attribute
products.push(smiles);
});
if (substrates.length > 0 && products.length > 0) {
reaction = substrates.join('.') + ">>" + products.join('.');
$('#reaction_image').empty();
$('#reaction_image').append(
"<img width='100%' src='{% url 'depict' %}?smirks=" + encodeURIComponent(reaction) +"'>"
);
}
}
$(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 () {
$('#add_pathway_edge_modal_form_submit').on('click', function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#add_pathway_edge_modal_form').submit();
});
});
}); });
var products = [];
$("#add_pathway_edge_products option:selected").each(function () {
var smiles = $(this).data("smiles"); // read data-smiles attribute
products.push(smiles);
});
if (substrates.length > 0 && products.length > 0) {
reaction = substrates.join(".") + ">>" + products.join(".");
$("#reaction_image").empty();
$("#reaction_image").append(
"<img width='100%' src='{% url 'depict' %}?smirks=" +
encodeURIComponent(reaction) +
"'>",
);
}
}
$(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 () {
$("#add_pathway_edge_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#add_pathway_edge_modal_form").submit();
});
});
});
</script> </script>

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

@ -1,78 +1,119 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="add_pathway_node_modal" tabindex="-1" aria-labelledby="add_pathway_node_modal" aria-modal="true" <div
role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="add_pathway_node_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="add_pathway_node_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">&times;</span> role="dialog"
</button> >
<h4 class="modal-title">Add a Node</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<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"> <button
{% csrf_token %} type="button"
<label for="node-name">Name</label> class="close"
<input id="node-name" class="form-control" name="node-name" placeholder="Name"/> data-dismiss="modal"
<label for="node-description">Description</label> aria-label="Close"
<input id="node-description" class="form-control" name="node-description" placeholder="Description"/> >
<label for="node-smiles">SMILES</label> <span aria-hidden="true">&times;</span>
<input type="text" class="form-control" name="node-smiles" placeholder="SMILES" id="node-smiles"> </button>
<p></p> <h4 class="modal-title">Add a Node</h4>
<div> </div>
<iframe id="add_node_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%" <div class="modal-body">
height="510"></iframe> <form
</div> id="add_pathway_node_modal_form"
<p></p> accept-charset="UTF-8"
</form> action="{% url 'package pathway node list' meta.current_package.uuid pathway.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="add_pathway_node_modal_form_submit">Submit</button> <label for="node-name">Name</label>
</div> <input
</div> id="node-name"
class="form-control"
name="node-name"
placeholder="Name"
/>
<label for="node-description">Description</label>
<input
id="node-description"
class="form-control"
name="node-description"
placeholder="Description"
/>
<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 newStructureModalketcherToNewStructureModalTextInput() { $(function () {
$('#node-smiles').val(this.ketcher.getSmiles()); $("#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);
}
};
$(function() { checkKetcherReady();
$('#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,78 +1,119 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="add_structure_modal" tabindex="-1" aria-labelledby="add_structure_modal" aria-modal="true" <div
role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="add_structure_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="add_structure_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">×</span> role="dialog"
</button> >
<h4 class="modal-title">Create a new Structure</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<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"> <button
{% csrf_token %} type="button"
<label for="structure-name">Name</label> class="close"
<input id="structure-name" class="form-control" name="structure-name" placeholder="Name"/> data-dismiss="modal"
<label for="structure-description">Description</label> aria-label="Close"
<input id="structure-description" class="form-control" name="structure-description" placeholder="Description"/> >
<label for="structure-smiles">SMILES</label> <span aria-hidden="true">×</span>
<input type="text" class="form-control" name="structure-smiles" placeholder="SMILES" id="structure-smiles"> </button>
<p></p> <h4 class="modal-title">Create a new Structure</h4>
<div> </div>
<iframe id="add_structure_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%" <div class="modal-body">
height="510"></iframe> <form
</div> id="add_structure_modal_form"
<p></p> accept-charset="UTF-8"
</form> action="{% url 'package compound structure list' meta.current_package.uuid compound.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="add_structure_modal_form_submit">Submit</button> <label for="structure-name">Name</label>
</div> <input
</div> id="structure-name"
class="form-control"
name="structure-name"
placeholder="Name"
/>
<label for="structure-description">Description</label>
<input
id="structure-description"
class="form-control"
name="structure-description"
placeholder="Description"
/>
<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 newStructureModalketcherToNewStructureModalTextInput() { $(function () {
$('#structure-smiles').val(this.ketcher.getSmiles()); $("#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);
}
};
$(function() { checkKetcherReady();
$('#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,66 +1,89 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
Deletes the Edge. Nodes referenced by this edge will remain. >
<p></p> <span aria-hidden="true">&times;</span>
<form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true" </button>
method="post"> </div>
{% csrf_token %} <div class="modal-body">
<select id="delete_pathway_edge_edges" name="edge-url" Deletes the Edge. Nodes referenced by this edge will remain.
data-actions-box='true' class="form-control" data-width='100%'> <p></p>
<option value="" disabled selected>Select Reaction to delete</option> <form
{% for e in pathway.edges %} id="delete-pathway-edge-modal-form"
<option value="{{ e.url }}">{{ e.edge_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_edge_image"></div> <select
</div> id="delete_pathway_edge_edges"
<div class="modal-footer"> name="edge-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-edge-modal-submit">Delete</button> class="form-control"
</div> data-width="100%"
</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,65 +2,92 @@
<!-- 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
Deletes the Node. Edges having this Node as Substrate or Product will be removed as well. >
<p></p> <span aria-hidden="true">&times;</span>
<form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true" </button>
method="post"> </div>
{% csrf_token %} <div class="modal-body">
<select id="delete_pathway_node_nodes" name="node-url" Deletes the Node. Edges having this Node as Substrate or Product will be
data-actions-box='true' class="form-control" data-width='100%'> removed as well.
<option value="" disabled selected>Select Compound to delete</option> <p></p>
{% for n in pathway.nodes %} <form
<option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option> id="delete-pathway-node-modal-form"
{% endfor %} accept-charset="UTF-8"
</select> action=""
<input type="hidden" id="hidden" name="hidden" value="delete"/> data-remote="true"
</form> method="post"
<p></p> >
<div id="delete_pathway_node_image"></div> {% csrf_token %}
</div> <select
<div class="modal-footer"> id="delete_pathway_node_nodes"
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> name="node-url"
<button type="button" class="btn btn-primary" id="delete-pathway-node-modal-submit">Delete</button> data-actions-box="true"
</div> class="form-control"
</div> data-width="100%"
>
<option value="" disabled selected>
Select Compound to delete
</option>
{% for n in pathway.nodes %}
<option value="{{ n.url }}">
{{ n.default_node_label.name|safe }}
</option>
{% 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,36 +1,53 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
By clicking on Download the Pathway will be converted into a CSV and directly downloaded. >
<form id="download-pathway-csv-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}" <span aria-hidden="true">&times;</span>
data-remote="true" method="GET"> </button>
<input type="hidden" name="download" value="true"/> </div>
</form> <div class="modal-body">
</div> By clicking on Download the Pathway will be converted into a CSV and
<div class="modal-footer"> directly downloaded.
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <form
<button type="button" class="btn btn-primary" id="download-pathway-csv-modal-submit">Download</button> id="download-pathway-csv-modal-form"
</div> accept-charset="UTF-8"
</div> action="{{ pathway.url }}"
data-remote="true"
method="GET"
>
<input type="hidden" name="download" value="true" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button
type="button"
class="btn btn-primary"
id="download-pathway-csv-modal-submit"
>
Download
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#download-pathway-csv-modal-submit").click(function (e) {
$('#download-pathway-csv-modal-submit').click(function (e) { e.preventDefault();
e.preventDefault(); $("#download-pathway-csv-modal-form").submit();
$('#download-pathway-csv-modal-form').submit(); $("#download_pathway_csv_modal").modal("hide");
$('#download_pathway_csv_modal').modal('hide'); });
}); });
})
</script> </script>

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

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

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

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

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

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

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

@ -1,121 +1,151 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<p> >
To add member (either User or entire Groups) to this group select the entity you want to add below <span aria-hidden="true">&times;</span>
and click the check mark. </button>
<br> </div>
To remove member simply click the <code>X</code> next to the member. <div class="modal-body">
</p> <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="row">
<div class="col-xs-8"> <div class="col-xs-8">
<legend>User or Group</legend> <legend>User or Group</legend>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<legend>Add/Remove</legend> <legend>Add/Remove</legend>
</div> </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>
</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 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>
</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>
<script> <script>
$(function () {
$("#edit-package-modal-submit").click(function (e) {
$(function() { e.preventDefault();
$("#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,45 +1,71 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
<h3 class="modal-title">Update Model</h3> data-dismiss="modal"
</div> aria-label="Close"
<div class="modal-body"> >
<p>Alter Name and Description of the Model.</p> <span aria-hidden="true">&times;</span>
<form id="edit-model-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post"> </button>
{% csrf_token %} <h3 class="modal-title">Update Model</h3>
<p> </div>
<label for="model-name">Name</label> <div class="modal-body">
<input id="model-name" type="text" class="form-control" name="model-name" <p>Alter Name and Description of the Model.</p>
value="{{ model.name|safe }}"> <form
</p> id="edit-model-modal-form"
<p> accept-charset="UTF-8"
<label for="model-description">Description</label> action=""
<input id="model-description" type="text" class="form-control" name="model-description" data-remote="true"
value="{{ model.description|safe }}"> method="post"
</p> >
</form> {% csrf_token %}
</div> <p>
<div class="modal-footer"> <label for="model-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-model-modal-submit">Update</button> id="model-name"
</div> type="text"
</div> class="form-control"
name="model-name"
value="{{ model.name|safe }}"
/>
</p>
<p>
<label for="model-description">Description</label>
<input
id="model-description"
type="text"
class="form-control"
name="model-description"
value="{{ model.description|safe }}"
/>
</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) {
$('#edit-model-modal-submit').click(function (e) { e.preventDefault();
e.preventDefault(); $("#edit-model-modal-form").submit();
$('#edit-model-modal-form').submit(); });
}); });
})
</script> </script>

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

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

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

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

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

@ -1,183 +1,264 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<p> >
Modify permissions for this package. Note that if you give <code>write</code> <span aria-hidden="true">&times;</span>
permissions to a user or group, <code>read</code> permissions will be granted automatically. </button>
<br> </div>
To allow users to perform destructive actions, such as deleting the package, <code>owner</code> <div class="modal-body">
permissions must be granted. <p>
</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="row">
<div class="col-xs-4"> <div class="col-xs-4">
<legend>User or Group</legend> <legend>User or Group</legend>
</div> </div>
<div class="col-xs-2"> <div class="col-xs-2">
<legend>Read</legend> <legend>Read</legend>
</div> </div>
<div class="col-xs-2"> <div class="col-xs-2">
<legend>Write</legend> <legend>Write</legend>
</div> </div>
<div class="col-xs-2"> <div class="col-xs-2">
<legend>Owner</legend> <legend>Owner</legend>
</div> </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>
</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 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>
</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>
<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 == 'read' && !$(readbox).prop("checked")) { if (perm == "write") {
$(writebox).prop("checked", false); if ($(writebox).prop("checked")) {
$(readbox).prop("checked", true);
}
if (!$(writebox).prop("checked")) {
$(ownerbox).prop("checked", false); $(ownerbox).prop("checked", false);
}
} }
if (perm == 'write') { if (perm == "owner") {
if ($(writebox).prop("checked")) { if ($(ownerbox).prop("checked")) {
$(readbox).prop("checked", true); $(readbox).prop("checked", true);
} $(writebox).prop("checked", true);
if (!$(writebox).prop("checked")) { }
$(ownerbox).prop("checked", false);
}
} }
}
if (perm == 'owner') { $(function () {
if ($(ownerbox).prop("checked")) { $("#edit-package-modal-submit").click(function (e) {
$(readbox).prop("checked", true); e.preventDefault();
$(writebox).prop("checked", true); $("#edit-package-modal-form").submit();
}
}
}
$(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,46 +1,82 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<p>To change your password please fill out the following inputs</p> >
<form id="edit-password-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post"> <span aria-hidden="true">&times;</span>
{% csrf_token %} </button>
<p> </div>
<label for="old-password">Old Password</label> <div class="modal-body">
<input id="old-password" class="form-control" name="old-password" type="password" autocomplete="current-password"> <p>To change your password please fill out the following inputs</p>
</p> <form
<p> id="edit-password-modal-form"
<label for="new-password">New Password</label> accept-charset="UTF-8"
<input id="new-password" class="form-control" name="new-password" type="password", autocomplete="new-password"> action=""
</p> data-remote="true"
<p> method="post"
<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"> {% csrf_token %}
</p> <p>
</form> <label for="old-password">Old Password</label>
</div> <input
<div class="modal-footer"> id="old-password"
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> class="form-control"
<button type="button" class="btn btn-primary" id="edit-password-modal-submit">Update</button> name="old-password"
</div> type="password"
</div> autocomplete="current-password"
/>
</p>
<p>
<label for="new-password">New Password</label>
<input
id="new-password"
class="form-control"
name="new-password"
type="password"
,
autocomplete="new-password"
/>
</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) {
$('#edit-password-modal-submit').click(function(e){ e.preventDefault();
e.preventDefault(); $("#edit-password-modal-form").submit();
$('#edit-password-modal-form').submit();
}); });
});
})
</script> </script>

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

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

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

@ -1,106 +1,163 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
To update your prediction setting modify parameters in the form below
und click "Update"
</p>
<form
id="edit-prediction-setting-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% 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 class="modal-body"> </div>
<p>To update your prediction setting modify parameters in the form below und click "Update"</p> </form>
<form id="edit-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post"> </div>
{% csrf_token %} <div class="modal-footer">
<div id="prediction-setting" class="panel-collapse collapse in"> <button type="button" class="btn btn-secondary" data-dismiss="modal">
<div class="panel-body list-group-item"> Close
</button>
<table class="table table-bordered table-hover"> <button
<tr style="background-color: rgba(0, 0, 0, 0.08);"> type="button"
<th scope="col" width="20%">Parameter</th> class="btn btn-primary"
<th scope="col" width="80%">Value</th> id="edit-prediction-setting-modal-submit"
</tr> >
<tbody> Update
{% if 'model' in user.prediction_settings %} </button>
<tr> </div>
<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) {
$('#edit-prediction-setting-modal-submit').click(function(e){ e.preventDefault();
e.preventDefault(); $("#edit-prediction-setting-modal-form").submit();
$('#edit-prediction-setting-modal-form').submit(); });
}); });
})
</script> </script>

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

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

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

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

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

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

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

@ -1,73 +1,93 @@
<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 %}
<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_model_modal" <option disabled>Unreviewed Packages</option>
aria-hidden="true"> {% for obj in meta.readable_packages %}
<div class="modal-dialog modal-lg"> {% if not obj.reviewed %}
<div class="modal-content"> <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
<div class="modal-header"> {% endif %}
<button type="button" class="close" data-dismiss="modal"> {% endfor %}
<span aria-hidden="true">&times;</span> </select>
<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> <!-- Eval Type -->
{% for obj in meta.readable_packages %} <label for="model-evaluation-type">Evaluation Type</label>
{% if not obj.reviewed %} <select
<option value="{{ obj.url }}">{{ obj.name|safe }}</option> id="model-evaluation-type"
{% endif %} name="model-evaluation-type"
{% endfor %} class="form-control"
</select> >
<option disabled selected>Select evaluation type</option>
<option value="sg">Single Generation</option>
<option value="mg">Multiple Generations</option>
</select>
<!-- Eval Type --> <input type="hidden" name="hidden" value="evaluate" />
<label for="model-evaluation-type">Evaluation Type</label> </form>
<select id="model-evaluation-type" name="model-evaluation-type" class="form-control"> </div>
<option disabled selected>Select evaluation type</option> <div class="modal-footer">
<option value="sg">Single Generation</option> <a id="evaluate_model_form_submit" class="btn btn-primary" href="#"
<option value="mg">Multiple Generations</option> >Evaluate</a
</select> >
<button type="button" class="btn btn-default" data-dismiss="modal">
<input type="hidden" name="hidden" value="evaluate"> Cancel
</form> </button>
</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();
$(function () { $("#evaluate_model_form_submit").on("click", function (e) {
e.preventDefault();
$("#model-evaluation-packages").selectpicker(); $("#evaluate_model_form").submit();
$('#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,36 +1,53 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
By clicking on Export the Package will be serialized into a JSON and directly downloaded. >
<form id="export-package-modal-form" accept-charset="UTF-8" action="{{ package.url }}" <span aria-hidden="true">&times;</span>
data-remote="true" method="GET"> </button>
<input type="hidden" name="export" value="true"/> </div>
</form> <div class="modal-body">
</div> By clicking on Export the Package will be serialized into a JSON and
<div class="modal-footer"> directly downloaded.
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <form
<button type="button" class="btn btn-primary" id="export-package-modal-form-submit">Export</button> id="export-package-modal-form"
</div> accept-charset="UTF-8"
</div> action="{{ package.url }}"
data-remote="true"
method="GET"
>
<input type="hidden" name="export" value="true" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button
type="button"
class="btn btn-primary"
id="export-package-modal-form-submit"
>
Export
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#export-package-modal-form-submit").click(function (e) {
$('#export-package-modal-form-submit').click(function (e) { e.preventDefault();
e.preventDefault(); $("#export-package-modal-form").submit();
$('#export-package-modal-form').submit(); $("#export_package_modal").modal("hide");
$('#export_package_modal').modal('hide'); });
}); });
})
</script> </script>

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

@ -1,75 +1,109 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<form id="generic-copy-object-modal-form" accept-charset="UTF-8" data-remote="true" method="post"> >
{% csrf_token %} <span aria-hidden="true">&times;</span>
<label for="target-package">Select the Target Package you want to copy this {{ object_type }} </button>
into</label> </div>
<select id="target-package" name="target-package" data-actions-box='true' class="form-control" <div class="modal-body">
data-width='100%'> <form
<option disabled selected>Select Target Package</option> id="generic-copy-object-modal-form"
{% for p in meta.writeable_packages %} accept-charset="UTF-8"
<option value="{{ p.url }}">{{ p.name|safe }}</option>` data-remote="true"
{% endfor %} method="post"
</select> >
<input type="hidden" name="hidden" value="copy"> {% csrf_token %}
</form> <label for="target-package"
<div id="copy-object-error-message" class="alert alert-danger" role="alert" style="display: none"> >Select the Target Package you want to copy this {{ object_type }}
</div> into</label
</div> >
<div class="modal-footer"> <select
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> id="target-package"
<button type="button" class="btn btn-primary" id="generic-copy-object-modal-form-submit"> name="target-package"
Copy data-actions-box="true"
</button> class="form-control"
</div> data-width="100%"
</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();
$('#generic-copy-object-modal-form-submit').click(function (e) { const packageUrl = $("#target-package").find(":selected").val();
e.preventDefault();
$('#copy-object-error-message').hide()
const packageUrl = $('#target-package').find(":selected").val(); if (
packageUrl === "Select Target Package" ||
packageUrl === "" ||
packageUrl === null ||
packageUrl === undefined
) {
return;
}
const formData = {
hidden: "copy",
object_to_copy: "{{ current_object.url }}",
};
if (packageUrl === 'Select Target Package' || packageUrl === '' || packageUrl === null || packageUrl === undefined) { $.ajax({
return; type: "post",
} data: formData,
const formData = { url: packageUrl,
hidden: 'copy', success: function (data, textStatus) {
object_to_copy: '{{ current_object.url }}', window.location.href = data.success;
} },
error: function (jqXHR, textStatus, errorThrown) {
$.ajax({ if (jqXHR.responseJSON.error.indexOf("to the same package") > -1) {
type: 'post', $("#copy-object-error-message").append(
data: formData, "<p>The target Package is the same as the source Package. Please select another target!</p>",
url: packageUrl, );
success: function (data, textStatus) { } else {
window.location.href = data.success; $("#copy-object-error-message").append(
}, "<p>" + jqXHR.responseJSON.error + "</p>",
error: function (jqXHR, textStatus, errorThrown) { );
if (jqXHR.responseJSON.error.indexOf('to the same package') > -1) { }
$('#copy-object-error-message').append('<p>The target Package is the same as the source Package. Please select another target!</p>'); $("#copy-object-error-message").show();
} 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,42 +1,58 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
{% if object_type == 'user' %} >
Clicking "Delete" will <strong>permanently</strong> delete the User and associated data. <span aria-hidden="true">&times;</span>
This action can't be undone! </button>
{% else %} </div>
Deletes the {{ object_type|capfirst }}. Related objects that depend on this {{ object_type|capfirst }} <div class="modal-body">
will be deleted as well. {% if object_type == 'user' %}
{% endif %} Clicking "Delete" will <strong>permanently</strong> delete the User
<form id="generic-delete-modal-form" accept-charset="UTF-8" action="{{ current_object.url }}" and associated data. This action can't be undone!
data-remote="true" method="post"> {% else %}
{% csrf_token %} Deletes the {{ object_type|capfirst }}. Related objects that depend on
<input type="hidden" id="hidden" name="hidden" value="delete"/> this {{ object_type|capfirst }} will be deleted as well.
</form> {% endif %}
</div> <form
<div class="modal-footer"> id="generic-delete-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="generic-delete-modal-form-submit">Delete</button> action="{{ current_object.url }}"
</div> data-remote="true"
</div> method="post"
>
{% csrf_token %}
<input type="hidden" id="hidden" name="hidden" value="delete" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button
type="button"
class="btn btn-primary"
id="generic-delete-modal-form-submit"
>
Delete
</button>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
$(function () { $(function () {
$("#generic-delete-modal-form-submit").click(function (e) {
$('#generic-delete-modal-form-submit').click(function (e) { e.preventDefault();
e.preventDefault(); $("#generic-delete-modal-form").submit();
$('#generic-delete-modal-form').submit(); });
}); });
})
</script> </script>

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

@ -1,170 +1,213 @@
{% 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 { .alias {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: #5bc0de; background-color: #5bc0de;
color: white; color: white;
padding: 4px 8px; padding: 4px 8px;
margin: 3px 3px; margin: 3px 3px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
line-height: 1.4; line-height: 1.4;
} }
.alias .remove { .alias .remove {
margin-left: 6px; margin-left: 6px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
} }
.alias-input { .alias-input {
flex: 1; flex: 1;
min-width: 120px; min-width: 120px;
border: none; border: none;
outline: none; outline: none;
margin: 3px 3px; margin: 3px 3px;
font-size: 14px; font-size: 14px;
} }
.form-control.alias-container { .form-control.alias-container {
height: auto; height: auto;
box-shadow: none; box-shadow: none;
} }
</style> </style>
<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal" <div
aria-modal="true" role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="set_aliases_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="set_aliases_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">×</span> role="dialog"
</button> >
<h4 class="modal-title">Set Aliases for {{ current_object.name|safe }}</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}" <button
data-remote="true" method="post"> type="button"
{% csrf_token %} class="close"
<label for="alias-input">Aliases:</label> data-dismiss="modal"
<div class="form-control alias-container" id="alias-box"> aria-label="Close"
{% for alias in current_object.aliases %} >
<span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span> <span aria-hidden="true">×</span>
{% endfor %} </button>
<input type="text" id="alias-input" class="alias-input" placeholder="Add Alias..."> <h4 class="modal-title">
</div> Set Aliases for {{ current_object.name|safe }}
</form> </h4>
<div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none"> </div>
</div> <div class="modal-body">
</div> <form
<div class="modal-footer"> id="set_aliases_modal_form"
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button> accept-charset="UTF-8"
<button type="button" class="btn btn-primary" id="set_aliases_modal_form_submit">Submit</button> action="{{ current_object.url }}"
</div> data-remote="true"
</div> 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>
</div> </div>
<script> <script>
$(function () { $(function () {
function addAlias(aliasText) {
aliasText = aliasText.trim();
if (aliasText === "") return;
function addAlias(aliasText) { // Avoid duplicate aliass
aliasText = aliasText.trim(); var exists = false;
if (aliasText === '') return; $("#alias-box .alias").each(function () {
if (
// Avoid duplicate aliass $(this).text().replace("×", "").trim().toLowerCase() ===
var exists = false; aliasText.toLowerCase()
$('#alias-box .alias').each(function () { ) {
if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) { exists = true;
exists = true; return false;
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 if (!exists) {
$('#alias-input').on('keypress', function (e) { var aliasHtml =
if (e.which === 13) { '<span class="alias">' +
e.preventDefault(); $("<div>").text(aliasText).html() +
addAlias($(this).val()); '<span class="remove">&times;</span></span>';
} $(aliasHtml).insertBefore("#alias-input");
}); }
// Add alias when input loses focus $("#alias-input").val("");
$('#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 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();
},
});
});
});
</script> </script>

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

@ -1,61 +1,97 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<form id="generic-set-external-reference-modal-form" accept-charset="UTF-8" >
action="{{ current_object.url }}" <span aria-hidden="true">&times;</span>
data-remote="true" method="post"> </button>
{% csrf_token %} </div>
<label for="database-select">Select the Database you want to attach an External Reference <div class="modal-body">
for</label> <form
<select id="database-select" name="selected-database" data-actions-box='true' class="form-control" id="generic-set-external-reference-modal-form"
data-width='100%'> accept-charset="UTF-8"
<option disabled selected>Select Database</option> action="{{ current_object.url }}"
{% for entity, databases in meta.external_databases.items %} data-remote="true"
{% if entity == object_type %} method="post"
{% for db in databases %} >
<option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}" {% csrf_token %}
value="{{ db.database.id }}">{{ db.database.name|safe }}</option>` <label for="database-select"
{% endfor %} >Select the Database you want to attach an External Reference
{% endif %} for</label
{% endfor %} >
</select> <select
<p></p> id="database-select"
<div id="input-div" style="display: none"> name="selected-database"
<label for="identifier" >The reference</label> data-actions-box="true"
<input type="text" id="identifier" name="identifier" class="form-control" placeholder=""> class="form-control"
</div> data-width="100%"
</form> >
</div> <option disabled selected>Select Database</option>
<div class="modal-footer"> {% for entity, databases in meta.external_databases.items %}
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> {% if entity == object_type %}
<button type="button" class="btn btn-primary" id="generic-set-external-reference-modal-form-submit">Submit</button> {% for db in databases %}
</div> <option
</div> id="db-select-{{ db.database.pk }}"
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();
});
$("#database-select").on("change", function () { $("#generic-set-external-reference-modal-form-submit").click(function (e) {
let selected = $(this).val(); e.preventDefault();
$("#identifier").attr("placeholder", $('#db-select-' + selected).data('input-placeholder')); $("#generic-set-external-reference-modal-form").submit();
$("#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,37 +1,71 @@
{% load static %} {% load static %}
<div class="modal fade bs-modal-lg" id="set_scenario_modal" tabindex="-1" aria-labelledby="set_scenario_modal" <div
aria-modal="true" role="dialog"> class="modal fade bs-modal-lg"
<div class="modal-dialog modal-lg"> id="set_scenario_modal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header"> aria-labelledby="set_scenario_modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-modal="true"
<span aria-hidden="true">×</span> role="dialog"
</button> >
<h4 class="modal-title">Set Scenarios for {{ current_object.name|safe }}</h4> <div class="modal-dialog modal-lg">
</div> <div class="modal-content">
<div class="modal-body"> <div class="modal-header">
<div id="loading_scenario_div" class="text-center"></div> <button
<form id="set_scenario_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}" type="button"
data-remote="true" method="post"> class="close"
{% csrf_token %} data-dismiss="modal"
<label for="scenario-select">Scenarios</label> aria-label="Close"
<select id="scenario-select" name="selected-scenarios" data-actions-box='true' class="form-control" >
multiple data-width='100%'> <span aria-hidden="true">×</span>
<option disabled>Select Scenarios</option> </button>
<option value="" hidden></option> <h4 class="modal-title">
</select> Set Scenarios for {{ current_object.name|safe }}
</form> </h4>
</div> </div>
<div class="modal-footer"> <div class="modal-body">
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close <div id="loading_scenario_div" class="text-center"></div>
</button> <form
<button type="button" class="btn btn-primary" id="set_scenario_modal_form_submit">Submit</button> id="set_scenario_modal_form"
</div> accept-charset="UTF-8"
</div> action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="scenario-select">Scenarios</label>
<select
id="scenario-select"
name="selected-scenarios"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<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 () {
@ -75,3 +109,4 @@
}); });
</script> </script>
{# prettier-ignore-end #}

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

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

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

@ -1,92 +1,118 @@
<div
<div class="modal fade" 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-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">Manage API Token</h3>
<h3 class="modal-title">Manage API Token</h3> </div>
</div> <div class="modal-body">
<div class="modal-body"> <p>
<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> Requesting a Token will invalidate all potential existing tokens. The
<form id="request_api_token_form" new token will only be shown once, so ensure to store it in secure
accept-charset="UTF-8" place
action="" </p>
data-remote="true" <form
method="post"> id="request_api_token_form"
{% csrf_token %} accept-charset="UTF-8"
<p> action=""
<label for="token-name">Name</label> data-remote="true"
<input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/> method="post"
<label for="valid-for">Valid for (in days)</label> >
<input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/> {% csrf_token %}
<input type="hidden" name="hidden" value="request-api-token"> <p>
</p> <label for="token-name">Name</label>
</form> <input
<div id="new-token"> type="text"
<pre id="new-token-pre"></pre> id="token-name"
</div> class="form-control"
<div id="existing-tokens"> name="name"
{% for t in tokens %} placeholder="Generic Token for {{ meta.user.username }}"
<form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post"> />
{% csrf_token %} <label for="valid-for">Valid for (in days)</label>
<div class="input-group"> <input
<input type="hidden" name="hidden" value="delete"> type="number"
<input type="hidden" name="token-id" value="{{ t.pk }}"> id="valid-for"
<input type="text" class="form-control" value="{{ t.name|safe }}" disabled> class="form-control"
<span class="input-group-btn"> name="valid-for"
<button type="submit" class="btn btn-danger">Delete</button> value="90"
</span> />
</div> <input type="hidden" name="hidden" value="request-api-token" />
</form> </p>
{% endfor %} </form>
</div> <div id="new-token">
</div> <pre id="new-token-pre"></pre>
<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,35 +1,52 @@
{% 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 type="button" class="close" data-dismiss="modal" aria-label="Close"> <button
<span aria-hidden="true">&times;</span> type="button"
</button> class="close"
</div> data-dismiss="modal"
<div class="modal-body"> aria-label="Close"
<p>Clicking on Publish will make this Package publicly available!</p> >
<form id="publish-package-modal-form" accept-charset="UTF-8" action="{{ current_package.url }}" data-remote="true" method="post"> <span aria-hidden="true">&times;</span>
{% csrf_token %} </button>
<input type="hidden" name="hidden" value="publish-package"> </div>
</form> <div class="modal-body">
</div> <p>Clicking on Publish will make this Package publicly available!</p>
<div class="modal-footer"> <form
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> id="publish-package-modal-form"
<button type="button" class="btn btn-primary" id="publish-package-modal-form-submit">Publish</button> accept-charset="UTF-8"
</div> action="{{ current_package.url }}"
</div> data-remote="true"
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) {
$('#publish-package-modal-form-submit').click(function(e){ e.preventDefault();
e.preventDefault(); $("#publish-package-modal-form").submit();
$('#publish-package-modal-form').submit();
}); });
});
})
</script> </script>

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

@ -1,149 +1,198 @@
<div class="modal fade" <div
tabindex="-1" class="modal fade"
id="set_license_modal" tabindex="-1"
role="dialog" id="set_license_modal"
aria-labelledby="set_license_modal" role="dialog"
aria-hidden="true"> aria-labelledby="set_license_modal"
<div class="modal-dialog"> aria-hidden="true"
<div class="modal-content"> >
<div class="modal-header"> <div class="modal-dialog">
<button type="button" <div class="modal-content">
class="close" <div class="modal-header">
data-dismiss="modal"> <button type="button" class="close" 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 />
(For more information please visit our <a target="#" <br />
href="https://wiki.envipath.org/index.php/License">wiki</a>.) (For more information please visit our
</p> <a target="#" href="https://wiki.envipath.org/index.php/License"
</div> >wiki</a
<div class="col-md-3"> >.)
<div id="ccfig"></div> </p>
</div> </div>
</div> <div class="col-md-3">
<form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post"> <div id="ccfig"></div>
{% csrf_token %} </div>
<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,39 +1,62 @@
{% load static %} {% load static %}
<!-- Update Scenario Additional Information--> <!-- Update Scenario Additional Information-->
<div id="update_scenario_additional_information_modal" class="modal" tabindex="-1"> <div
<div class="modal-dialog"> id="update_scenario_additional_information_modal"
<div class="modal-content"> class="modal"
<div class="modal-header"> tabindex="-1"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> >
<span aria-hidden="true">&times;</span> <div class="modal-dialog">
</button> <div class="modal-content">
<h3 class="modal-title">Update Additional Information</h3> <div class="modal-header">
</div> <button
<div class="modal-body"> type="button"
<form id="edit-scenario-additional-information-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post"> class="close"
{% csrf_token %} data-dismiss="modal"
{% for widget in update_widgets %} aria-label="Close"
{{ widget|safe }} >
{% endfor %} <span aria-hidden="true">&times;</span>
<input type="hidden" name="hidden" value="set-additional-information"> </button>
</form> <h3 class="modal-title">Update Additional Information</h3>
</div> </div>
<div class="modal-footer"> <div class="modal-body">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <form
<button type="button" class="btn btn-primary" id="edit-scenario-additional-information-modal-submit">Update</button> id="edit-scenario-additional-information-modal-form"
</div> accept-charset="UTF-8"
</div> action=""
data-remote="true"
method="post"
>
{% csrf_token %}
{% for widget in update_widgets %}
{{ widget|safe }}
{% endfor %}
<input
type="hidden"
name="hidden"
value="set-additional-information"
/>
</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) {
$('#edit-scenario-additional-information-modal-submit').click(function(e){ e.preventDefault();
e.preventDefault(); $("#edit-scenario-additional-information-modal-form").submit();
$('#edit-scenario-additional-information-modal-form').submit();
}); });
});
});
</script> </script>

273
templates/modals/predict_modal.html
View File

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

943
templates/modals/search_modal.html
View File

File diff suppressed because it is too large Load Diff

277
templates/objects/composite_rule.html
View File

@ -2,126 +2,179 @@
{% 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 class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px"> <div
{{ rule.name|safe }} class="panel-heading"
<div id="actionsButton" id="headingPanel"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" style="font-size:2rem;height: 46px"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >
aria-haspopup="true" aria-expanded="false"><span {{ rule.name|safe }}
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span <div
style="padding-right:1em"></span></a> id="actionsButton"
<ul id="actionsList" class="dropdown-menu"> style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
{% block actions %} class="dropdown"
{% include "actions/objects/rule.html" %} >
{% endblock %} <a
</ul> href="#"
</div> class="dropdown-toggle"
</div> data-toggle="dropdown"
<div class="panel-body"> role="button"
<p> aria-haspopup="true"
{{ rule.description|safe }} aria-expanded="false"
</p> ><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>
<div class="panel-body">
<p>{{ rule.description|safe }}</p>
</div>
{% if rule.aliases %} {% if rule.aliases %}
<!-- Aliases --> <!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="rule-aliases-link"
data-toggle="collapse"
data-parent="#rule-detail"
href="#rule-aliases"
>Aliases</a
>
</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>
{% 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 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 id="rule-aliases-link" data-toggle="collapse" data-parent="#rule-detail" <a
href="#rule-aliases">Aliases</a> id="{{ k|slugify }}_Link"
data-toggle="collapse"
data-parent="#{{ k|slugify }}_Accordion"
href="#{{ k|slugify }}"
>
{{ k }}
</a>
</h4> </h4>
</div> </div>
<div id="rule-aliases" class="panel-collapse collapse in"> <div id="{{ k|slugify }}" class="panel-collapse in collapse">
<div class="panel-body list-group-item"> <div class="panel-body list-group-item">
{% for alias in rule.aliases %} {% for enzyme in v %}
<a class="list-group-item">{{ alias }}</a> <a class="list-group-item" href="{{ enzyme.url }}">
{% endfor %} {{ 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>
</div> </div>
{% endif %} {% endfor %}
</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>
<div id="rule-reaction-patterns" class="panel-collapse collapse in"> {% endif %}
<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 %}

594
templates/objects/compound.html
View File

@ -2,240 +2,370 @@
{% 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 panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ compound.name|safe }}
<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 %}
{% 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 %}
<!-- Aliases -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="compound-aliases-link" data-toggle="collapse" data-parent="#compound-detail"
href="#compound-aliases">Aliases</a>
</h4>
</div>
<div id="compound-aliases" class="panel-collapse collapse in">
<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 collapse in">
<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 collapse in">
<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 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 %}
<!-- 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 class="panel-group" id="compound-detail">
<div class="panel panel-default">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ compound.name|safe }}
<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 %}
{% include "actions/objects/compound.html" %}
{% endblock %}
</ul>
</div> </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 %}
<!-- Aliases -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="compound-aliases-link"
data-toggle="collapse"
data-parent="#compound-detail"
href="#compound-aliases"
>Aliases</a
>
</h4>
</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 %}
{% 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 in collapse"
>
{% 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 in collapse"
>
{% 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>
</div>
{% endblock content %} {% endblock content %}

218
templates/objects/compound_structure.html
View File

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

336
templates/objects/edge.html
View File

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

253
templates/objects/enzymelink.html
View File

@ -1,105 +1,164 @@
{% 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>
<div class="panel-group" id="enzyme-detail"> <!-- Name -->
<div class="panel panel-default"> <div
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px"> class="panel panel-default panel-heading list-group-item"
{{ enzymelink.ec_number }} style="background-color:silver"
</div> >
<h4 class="panel-title">
<!-- Name --> <a
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver"> id="enzyme-name-link"
<h4 class="panel-title"> data-toggle="collapse"
<a id="enzyme-name-link" data-toggle="collapse" data-parent="#enzyme-detail" data-parent="#enzyme-detail"
href="#enzyme-name">Enzyme Name</a> href="#enzyme-name"
</h4> >Enzyme Name</a
</div> >
<div id="enzyme-name" class="panel-collapse collapse in"> </h4>
<div class="panel-body list-group-item"> </div>
{{ enzymelink.name }} <div id="enzyme-name" class="panel-collapse in collapse">
</div> <div class="panel-body list-group-item">{{ enzymelink.name }}</div>
</div> </div>
<!-- Linking Method -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="enzyme-linking-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-linking">Linking Method</a>
</h4>
</div>
<div id="enzyme-linking" class="panel-collapse collapse in">
<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 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="enzyme-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-evidence">Linking Evidence</a>
</h4>
</div>
<div id="enzyme-evidence" class="panel-collapse collapse in">
<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 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="enzyme-reaction-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-reaction-evidence">Linking Evidence - enviPath Reactions</a>
</h4>
</div>
<div id="enzyme-reaction-evidence" class="panel-collapse collapse in">
<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 %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="enzyme-edge-evidence-link" data-toggle="collapse" data-parent="#enzyme-detail"
href="#enzyme-edge-evidence">Linking Evidence - enviPath Pathways</a>
</h4>
</div>
<div id="enzyme-edge-evidence" class="panel-collapse collapse in">
<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>
<!-- Linking Method -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="enzyme-linking-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-linking"
>Linking Method</a
>
</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>
</div>
{% if enzymelink.kegg_reaction_links %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="enzyme-evidence-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-evidence"
>Linking Evidence</a
>
</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 %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="enzyme-reaction-evidence-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-reaction-evidence"
>Linking Evidence - enviPath Reactions</a
>
</h4>
</div>
<div id="enzyme-reaction-evidence" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for r in enzymelink.reaction_evidence.all %}
<a class="list-group-item" href="{{ r.url }}"
>{{ r.name }} <i>({{ r.package.name }})</i></a
>
{% endfor %}
</div>
</div>
{% endif %}
{% if enzymelink.edge_evidence.all %}
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="enzyme-edge-evidence-link"
data-toggle="collapse"
data-parent="#enzyme-detail"
href="#enzyme-edge-evidence"
>Linking Evidence - enviPath Pathways</a
>
</h4>
</div>
<div id="enzyme-edge-evidence" class="panel-collapse in collapse">
<div class="panel-body list-group-item">
{% for e in enzymelink.edge_evidence.all %}
<a class="list-group-item" href="{{ e.pathway.url }}"
>{{ e.pathway.name }} <i>({{ r.package.name }})</i></a
>
{% 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 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>
{% endblock content %} {% endblock content %}

117
templates/objects/group.html
View File

@ -2,63 +2,90 @@
{% 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 class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px"> <div
{{ group.name|safe }} class="panel-heading"
<div id="actionsButton" id="headingPanel"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" style="font-size:2rem;height: 46px"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >
aria-haspopup="true" aria-expanded="false"><span {{ group.name|safe }}
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span <div
style="padding-right:1em"></span></a> id="actionsButton"
<ul id="actionsList" class="dropdown-menu"> style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
{% block actions %} class="dropdown"
{% include "actions/objects/group.html" %} >
{% endblock %} <a
</ul> href="#"
</div> class="dropdown-toggle"
</div> data-toggle="dropdown"
<div class="panel-body"> role="button"
<p> {{ group.description|safe }} </p> aria-haspopup="true"
aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/group.html" %}
{% 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 id="member-panel" style="font-size:2rem;height: 46px" class="panel-heading">Members</div> <div
<div class="panel-body"> id="member-panel"
<p>List of members of this group</p> style="font-size:2rem;height: 46px"
</div> class="panel-heading"
<ul class="list-group"> >
{% for um in group.user_member.all %} Members
<a class="list-group-item" href="{{ um.url }}">{{ um.username|safe }}</a> </div>
{% endfor %} <div class="panel-body">
{% for gm in group.group_member.all %} <p>List of members of this group</p>
<a class="list-group-item" href="{{ gm.url }}">{{ gm.name|safe }}</a> </div>
{% endfor %} <ul class="list-group">
</ul> {% for um in group.user_member.all %}
<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 id="package-panel" style="font-size:2rem;height: 46px" class="panel-heading">Packages</div> <div
<div class="panel-body"> id="package-panel"
<p>Packages where this group has access to</p> style="font-size:2rem;height: 46px"
</div> class="panel-heading"
<ul class="list-group"> >
{% for p in packages %} Packages
<a class="list-group-item" href="{{ p.url }}">{{ p.name|safe }}</a> </div>
{% endfor %} <div class="panel-body">
</ul> <p>Packages where this group has access to</p>
</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 collapse in"> <div id="rule-package" class="panel-collapse in collapse">
<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 collapse in"> <div id="reaction-package" class="panel-collapse in collapse">
<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 collapse in"> <div id="eval-package" class="panel-collapse in collapse">
<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 collapse in"> <div id="model-status" class="panel-collapse in collapse">
<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 collapse in"> <div id="predict-smiles" class="panel-collapse in collapse">
<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 collapse in"> <div id="app-domain-assessment" class="panel-collapse in collapse">
<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 collapse in"> <div id="sg-curve" class="panel-collapse in collapse">
<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,120 +2,174 @@
{% 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 class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px"> <div
{{ node.name|safe }} class="panel-heading"
<div id="actionsButton" id="headingPanel"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;" style="font-size:2rem;height: 46px"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >
aria-haspopup="true" aria-expanded="false"><span {{ node.name|safe }}
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span <div
style="padding-right:1em"></span></a> id="actionsButton"
<ul id="actionsList" class="dropdown-menu"> style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
{% block actions %} class="dropdown"
{% include "actions/objects/node.html" %} >
{% endblock %} <a
</ul> href="#"
</div> class="dropdown-toggle"
</div> data-toggle="dropdown"
<div class="panel-body"> role="button"
The underlying structure can be found <a href="{{ node.default_node_label.url }}">here</a>. aria-haspopup="true"
</div> aria-expanded="false"
><span class="glyphicon glyphicon-wrench"></span> Actions
<span class="caret"></span><span style="padding-right:1em"></span
></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/node.html" %}
{% 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 class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
<h4 class="panel-title"> class="panel panel-default panel-heading list-group-item"
<a id="node-desc-link" data-toggle="collapse" data-parent="#node-detail" style="background-color:silver"
href="#node-desc">Description</a> >
</h4> <h4 class="panel-title">
</div> <a
<div id="node-desc" class="panel-collapse collapse in"> id="node-desc-link"
<div class="panel-body list-group-item"> data-toggle="collapse"
{{ node.description|safe }} data-parent="#node-detail"
</div> href="#node-desc"
</div> >Description</a
>
</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 class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
<h4 class="panel-title"> class="panel panel-default panel-heading list-group-item"
<a id="node-aliases-link" data-toggle="collapse" data-parent="#node-detail" style="background-color:silver"
href="#node-aliases">Aliases</a> >
</h4> <h4 class="panel-title">
</div> <a
<div id="node-aliases" class="panel-collapse collapse in"> id="node-aliases-link"
<div class="panel-body list-group-item"> data-toggle="collapse"
{% for alias in node.aliases %} data-parent="#node-detail"
<a class="list-group-item">{{ alias }}</a> href="#node-aliases"
{% endfor %} >Aliases</a
</div> >
</div> </h4>
{% endif %} </div>
<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 class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
<h4 class="panel-title"> class="panel panel-default panel-heading list-group-item"
<a id="node-image-link" data-toggle="collapse" data-parent="#node-detail" style="background-color:silver"
href="#node-image">Image Representation</a> >
</h4> <h4 class="panel-title">
</div> <a
<div id="node-image" class="panel-collapse collapse in"> id="node-image-link"
<div class="panel-body list-group-item"> data-toggle="collapse"
<div id="image-div" align="center"> data-parent="#node-detail"
{{ node.default_node_label.as_svg|safe }} href="#node-image"
</div> >Image Representation</a
</div> >
</div> </h4>
</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 class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
<h4 class="panel-title"> class="panel panel-default panel-heading list-group-item"
<a id="node-smiles-link" data-toggle="collapse" data-parent="#node-detail" style="background-color:silver"
href="#node-smiles">SMILES Representation</a> >
</h4> <h4 class="panel-title">
</div> <a
<div id="node-smiles" class="panel-collapse collapse in"> id="node-smiles-link"
<div class="panel-body list-group-item"> data-toggle="collapse"
{{ node.default_node_label.smiles }} data-parent="#node-detail"
</div> href="#node-smiles"
</div> >SMILES Representation</a
>
</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 class="panel panel-default panel-heading list-group-item" style="background-color:silver"> <div
<h4 class="panel-title"> class="panel panel-default panel-heading list-group-item"
<a id="node-scenario-link" data-toggle="collapse" data-parent="#node-detail" style="background-color:silver"
href="#node-scenario">Scenarios</a> >
</h4> <h4 class="panel-title">
</div> <a
<div id="node-scenario" class="panel-collapse collapse in"> id="node-scenario-link"
<div class="panel-body list-group-item"> data-toggle="collapse"
{% for s in node.scenarios.all %} data-parent="#node-detail"
<a class="list-group-item" href="{{ s.url }}">{{ s.name|safe }} <i>({{ s.package.name|safe }})</i></a> href="#node-scenario"
{% endfor %} >Scenarios</a
</div> >
</div> </h4>
{% endif %} </div>
<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>
{% endif %} {# prettier-ignore-end #}
{% endif %}
</div>
</div> </div>
</div>
{% endblock content %} {% endblock content %}

107
templates/objects/package.html
View File

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

746
templates/objects/pathway.html
View File

@ -1,338 +1,449 @@
{% 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;
}
<script src="https://d3js.org/d3.v7.min.js"></script> #pwsvg {
<style> width: 100%;
#vizdiv { height: 100%;
width: 100%; color: red;
height: 600px; }
background: white;
}
#pwsvg { .link {
width: 100%; stroke: #999;
height: 100%; stroke-opacity: 0.6;
color: red; }
}
.link { .link_no_arrow {
stroke: #999; stroke: #999;
stroke-opacity: 0.6; stroke-opacity: 0.6;
//marker-end: url(#arrow); }
}
.link_no_arrow { .node image {
stroke: #999; cursor: pointer;
stroke-opacity: 0.6; }
}
.node image { .node circle {
cursor: pointer; fill: lightblue;
} stroke: steelblue;
stroke-width: 1.5px;
}
.node circle { .inside_app_domain {
fill: lightblue; fill: green;
stroke: steelblue; stroke: green;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.inside_app_domain { .outside_app_domain {
fill: green; fill: red;
stroke: green; stroke: red;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.outside_app_domain { .passes_app_domain {
fill: red; stroke: green;
stroke: red; stroke-width: 1.5px;
stroke-width: 1.5px; stroke-opacity: 0.6;
} }
.passes_app_domain { .fails_app_domain {
stroke: green; stroke: red;
stroke-width: 1.5px; stroke-width: 1.5px;
stroke-opacity: 0.6; stroke-opacity: 0.6;
} }
.fails_app_domain { .highlighted {
stroke: red; stroke: red;
stroke-width: 1.5px; stroke-width: 3px;
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>
.highlighted { {% block action_modals %}
stroke: red; {% include "modals/objects/add_pathway_node_modal.html" %}
stroke-width: 3px; {% include "modals/objects/add_pathway_edge_modal.html" %}
} {% 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 %}
.tooltip { <p></p>
position: absolute; <div id="pwcontent">
background: lightgrey; <div class="panel-group" id="pwAccordion">
padding: 5px; <div class="panel panel-default">
border-radius: 5px; <div
visibility: hidden; class="panel-heading"
opacity: 1 id="headingPanel"
} style="font-size:2rem;height: 46px"
</style> >
<script src="{% static 'js/pw.js' %}"></script> {{ pathway.name|safe }}
{% block action_modals %}
{% include "modals/objects/add_pathway_node_modal.html" %}
{% include "modals/objects/add_pathway_edge_modal.html" %}
{% 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>
<div id="pwcontent">
<div class="panel-group" id="pwAccordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ pathway.name|safe }}
</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 collapse in">
<nav role="navigation" class="navbar navbar-default" style="margin: 0;">
<div class="navbar-header">
</div>
<div id="editbarCollapse" class="collapse navbar-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">
<li>
<a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
<span class="glyphicon glyphicon-fullscreen"></span>
Fullscreen
</a>
</li>
<li>
{% if pathway.completed %}
<button type="button" class="btn btn-default navbar-btn" data-toggle="popover"
id="status" data-original-title="" title=""
data-content="Pathway prediction complete.">
<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 collapse in">
<div class="panel-body list-group-item" id="DescriptionContent">
{{ pathway.description | safe }}
</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>
</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">
<li>
<a
role="button"
data-toggle="modal"
onclick="goFullscreen('vizdiv')"
>
<span class="glyphicon glyphicon-fullscreen"></span>
Fullscreen
</a>
</li>
<li>
{% if pathway.completed %}
<button
type="button"
class="btn btn-default navbar-btn"
data-toggle="popover"
id="status"
data-original-title=""
title=""
data-content="Pathway prediction complete."
>
<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 %}
<!-- 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 in collapse">
<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 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>
</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-bordered table-hover table"
>
<tbody>
<tr>
<td colspan="2">
{% for p in pathway.setting.rule_packages.all %}
<li class="list-group-item">
<a href="{{ p.url }}"> {{ p.name|safe }} </a>
</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>
</div>
{# prettier-ignore-start #}
<script> <script>
// Global switch for app domain view // Global switch for app domain view
var appDomainViewEnabled = false; var appDomainViewEnabled = false;
@ -455,4 +566,5 @@
}); });
</script> </script>
{# prettier-ignore-end #}
{% endblock content %} {% endblock content %}

562
templates/objects/reaction.html
View File

@ -2,224 +2,352 @@
{% 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 panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ reaction.name|safe }}
<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 %}
{% include "actions/objects/reaction.html" %}
{% endblock %}
</ul>
</div>
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="reaction-desc-link" data-toggle="collapse" data-parent="#reaction-detail"
href="#reaction-desc">Description</a>
</h4>
</div>
<div id="reaction-desc" class="panel-collapse collapse in">
<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 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 %}
<!-- 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 collapse in">
<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 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 %}
{% 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 class="panel-group" id="reaction-detail">
<div class="panel panel-default">
<div
class="panel-heading"
id="headingPanel"
style="font-size:2rem;height: 46px"
>
{{ reaction.name|safe }}
<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 %}
{% include "actions/objects/reaction.html" %}
{% endblock %}
</ul>
</div> </div>
</div>
<!-- Description -->
<div
class="panel panel-default panel-heading list-group-item"
style="background-color:silver"
>
<h4 class="panel-title">
<a
id="reaction-desc-link"
data-toggle="collapse"
data-parent="#reaction-detail"
href="#reaction-desc"
>Description</a
>
</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">
<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 in collapse"
>
{% 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 in collapse"
>
{% for eid in reaction.get_uniprot_identifiers %}
<a class="list-group-item" href="{{ eid.external_url }}"
>10 SwissProt entries ({{ eid.identifier_value }})</a
>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div> </div>
</div>
{% endblock content %} {% endblock content %}

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