forked from enviPath/enviPy
Basic System (#31)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#31
This commit is contained in:
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_compound_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Compound</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_compound_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Compound</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_compound_structure_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Compound Structure</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_compound_structure_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Compound Structure</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
6
templates/actions/collections/edge.html
Normal file
6
templates/actions/collections/edge.html
Normal file
@ -0,0 +1,6 @@
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_edge_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Edge</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_group_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Group</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_model_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Model</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_model_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Model</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
6
templates/actions/collections/node.html
Normal file
6
templates/actions/collections/node.html
Normal file
@ -0,0 +1,6 @@
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_node_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Node</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#predict_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Pathway</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#predict_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Pathway</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_reaction_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Reaction</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_reaction_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Reaction</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_rule_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Rule</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_rule_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Rule</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_pathway_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Scenario</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_pathway_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Scenario</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_setting_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span>New Setting</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_setting_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span>New Setting</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,12 +1,14 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_compound_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Compound</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#add_structure_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> Add Structure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_compound_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_compound_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Compound</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#add_structure_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> Add Structure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_compound_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,8 +1,10 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_compound_structure_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_compound_structure_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_compound_structure_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Compound Structure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_compound_structure_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Compound Structure</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,8 +1,10 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#delete_group_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Group</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_group_member_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Add/Remove Member</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#delete_group_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Group</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_group_member_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Add/Remove Member</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
6
templates/actions/objects/model.html
Normal file
6
templates/actions/objects/model.html
Normal file
@ -0,0 +1,6 @@
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_model_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Model</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
10
templates/actions/objects/node.html
Normal file
10
templates/actions/objects/node.html
Normal file
@ -0,0 +1,10 @@
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_node_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Node</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_node_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Node</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,16 +1,18 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_package_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Package</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_package_permissions_modal">
|
||||
<i class="glyphicon glyphicon-user"></i> Edit Permissions</a>
|
||||
</li>
|
||||
<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="#delete_package_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Package</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_package_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Package</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_package_permissions_modal">
|
||||
<i class="glyphicon glyphicon-user"></i> Edit Permissions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#set_license_modal">
|
||||
<i class="glyphicon glyphicon-duplicate"></i> License</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_package_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Package</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,8 +1,32 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_pathway_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Pathway</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_pathawy_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Pathway</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#add_pathway_node_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> Add Compound</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> Add Reaction</a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#edit_pathway_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> Edit Pathway</a>
|
||||
</li>
|
||||
{# <li>#}
|
||||
{# <a class="button" data-toggle="modal" data-target="#add_pathway_edge_modal">#}
|
||||
{# <i class="glyphicon glyphicon-plus"></i> Calculate Compound Properties</a>#}
|
||||
{# </li>#}
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_pathway_node_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
|
||||
</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="#delete_pathway_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Pathway</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,8 +1,10 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_reaction_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Reaction</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_reaction_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_reaction_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Reaction</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_reaction_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Reaction</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -1,4 +1,6 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_rule_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Rule</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_rule_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Rule</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -0,0 +1,2 @@
|
||||
{% if meta.can_edit %}
|
||||
{% endif %}
|
||||
@ -1,20 +1,22 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_user_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Update</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_password_modal">
|
||||
<i class="glyphicon glyphicon-lock"></i> Update Password</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_prediction_setting_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#manage_api_token_modal">
|
||||
<i class="glyphicon glyphicon-console"></i> Manage API Token</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#delete_user_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Account</a>
|
||||
</li>
|
||||
{% if meta.can_edit %}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_user_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Update</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_password_modal">
|
||||
<i class="glyphicon glyphicon-lock"></i> Update Password</a>
|
||||
</li>
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_prediction_setting_modal">
|
||||
<i class="glyphicon glyphicon-plus"></i> New Prediction Setting</a>
|
||||
</li>
|
||||
{# <li>#}
|
||||
{# <a role="button" data-toggle="modal" data-target="#manage_api_token_modal">#}
|
||||
{# <i class="glyphicon glyphicon-console"></i> Manage API Token</a>#}
|
||||
{# </li>#}
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#delete_user_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Account</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -35,12 +35,16 @@
|
||||
{% 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" %}
|
||||
{#{% include "modals/collections/new_setting_modal.html" %}#}
|
||||
{% elif object_type == 'user' %}
|
||||
<div></div>
|
||||
{% elif object_type == 'group' %}
|
||||
@ -63,6 +67,10 @@
|
||||
Reactions
|
||||
{% elif object_type == 'pathway' %}
|
||||
Pathways
|
||||
{% elif object_type == 'node' %}
|
||||
Nodes
|
||||
{% elif object_type == 'edge' %}
|
||||
Edges
|
||||
{% elif object_type == 'scenario' %}
|
||||
Scenarios
|
||||
{% elif object_type == 'model' %}
|
||||
@ -75,34 +83,38 @@
|
||||
Groups
|
||||
{% endif %}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% if object_type == 'package' %}
|
||||
{% include "actions/collections/package.html" %}
|
||||
{% elif object_type == 'compound' %}
|
||||
{% include "actions/collections/compound.html" %}
|
||||
{% elif object_type == 'structure' %}
|
||||
{% include "actions/collections/compound_structure.html" %}
|
||||
{% elif object_type == 'rule' %}
|
||||
{% include "actions/collections/rule.html" %}
|
||||
{% elif object_type == 'reaction' %}
|
||||
{% include "actions/collections/reaction.html" %}
|
||||
{% elif object_type == 'setting' %}
|
||||
{% include "actions/collections/setting.html" %}
|
||||
{% elif object_type == 'scenario' %}
|
||||
{% include "actions/collections/scenario.html" %}
|
||||
{% elif object_type == 'model' %}
|
||||
{% include "actions/collections/model.html" %}
|
||||
{% elif object_type == 'pathway' %}
|
||||
{% include "actions/collections/pathway.html" %}
|
||||
{% elif object_type == 'group' %}
|
||||
{% include "actions/collections/group.html" %}
|
||||
{% endif %}
|
||||
{% if object_type == 'package' %}
|
||||
{% include "actions/collections/package.html" %}
|
||||
{% elif object_type == 'compound' %}
|
||||
{% include "actions/collections/compound.html" %}
|
||||
{% elif object_type == 'structure' %}
|
||||
{% include "actions/collections/compound_structure.html" %}
|
||||
{% elif object_type == 'rule' %}
|
||||
{% include "actions/collections/rule.html" %}
|
||||
{% elif object_type == 'reaction' %}
|
||||
{% include "actions/collections/reaction.html" %}
|
||||
{% elif object_type == 'setting' %}
|
||||
{% include "actions/collections/setting.html" %}
|
||||
{% elif object_type == 'scenario' %}
|
||||
{% include "actions/collections/scenario.html" %}
|
||||
{% elif object_type == 'model' %}
|
||||
{% include "actions/collections/model.html" %}
|
||||
{% elif object_type == 'pathway' %}
|
||||
{% include "actions/collections/pathway.html" %}
|
||||
{% elif object_type == 'node' %}
|
||||
{% include "actions/collections/node.html" %}
|
||||
{% elif object_type == 'edge' %}
|
||||
{% include "actions/collections/edge.html" %}
|
||||
{% elif object_type == 'group' %}
|
||||
{% include "actions/collections/group.html" %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -133,6 +145,14 @@
|
||||
<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
|
||||
>></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
|
||||
>></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
|
||||
>></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
|
||||
@ -185,7 +205,7 @@
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for obj in reviewed_objects|slice:":50" %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}{# <i>({{ obj.package.name }})</i> #}
|
||||
<span class="glyphicon glyphicon-star" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
@ -229,51 +249,52 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#modal-form-delete-submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#modal-form-delete').submit();
|
||||
});
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
$('#object-search').show();
|
||||
|
||||
if ($('#load-remaining').length) {
|
||||
$('#load-remaining').on('click', function() {
|
||||
|
||||
makeLoadingGif("#load-all-loading", "{% static '/images/wait.gif' %}");
|
||||
$('#load-all-error').hide();
|
||||
|
||||
$.getJSON('?all=true', function(resp) {
|
||||
$('#ReviewedContent').empty();
|
||||
$('#UnreviewedContent').empty();
|
||||
|
||||
for(o in resp.objects) {
|
||||
obj = resp.objects[o];
|
||||
if (obj.reviewed) {
|
||||
$('#ReviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
|
||||
} else {
|
||||
$('#UnreviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
|
||||
}
|
||||
}
|
||||
|
||||
$('#load-all-loading').empty();
|
||||
$('#load-remaining').hide();
|
||||
}).fail(function(resp) {
|
||||
$('#load-all-loading').empty();
|
||||
$('#load-all-error').show();
|
||||
$('#modal-form-delete-submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#modal-form-delete').submit();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('#object-search').on('keyup', function() {
|
||||
let query = $(this).val().toLowerCase();
|
||||
$('a.list-group-item').each(function() {
|
||||
let text = $(this).text().toLowerCase();
|
||||
$(this).toggle(text.indexOf(query) !== -1);
|
||||
});
|
||||
});
|
||||
$('#object-search').show();
|
||||
|
||||
});
|
||||
</script>
|
||||
if ($('#load-remaining').length) {
|
||||
$('#load-remaining').on('click', function () {
|
||||
|
||||
makeLoadingGif("#load-all-loading", "{% static '/images/wait.gif' %}");
|
||||
$('#load-all-error').hide();
|
||||
|
||||
$.getJSON('?all=true', function (resp) {
|
||||
$('#ReviewedContent').empty();
|
||||
$('#UnreviewedContent').empty();
|
||||
|
||||
for (o in resp.objects) {
|
||||
obj = resp.objects[o];
|
||||
if (obj.reviewed) {
|
||||
$('#ReviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
|
||||
} else {
|
||||
$('#UnreviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
|
||||
}
|
||||
}
|
||||
|
||||
$('#load-all-loading').empty();
|
||||
$('#load-remaining').hide();
|
||||
}).fail(function (resp) {
|
||||
$('#load-all-loading').empty();
|
||||
$('#load-all-error').show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('#object-search').on('keyup', function () {
|
||||
let query = $(this).val().toLowerCase();
|
||||
$('a.list-group-item').each(function () {
|
||||
let text = $(this).text().toLowerCase();
|
||||
$(this).toggle(text.indexOf(query) !== -1);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
14
templates/errors/error.html
Normal file
14
templates/errors/error.html
Normal file
@ -0,0 +1,14 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<h4 class="alert-heading">Something went wrong!</h4>
|
||||
<p>An unexpected Error occurred...</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
The error was logged and will be investigated.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
@ -2,9 +2,9 @@
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div class="alert alert-error" role="alert">
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<h4 class="alert-heading">Your account has not been activated yet!</h4>
|
||||
<p>Your account has not been activated yet. If you have question <a href="mailto:admin@envipath.org">contact
|
||||
<p>Your account has not been activated yet. If you have questions <a href="mailto:admin@envipath.org">contact
|
||||
us.</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -14,13 +14,25 @@
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
|
||||
<!-- CDN END -->
|
||||
<meta name="csrf-token" content="{{ csrf_token }}">
|
||||
<script>
|
||||
const csrftoken = document.querySelector('[name=csrf-token]').content;
|
||||
|
||||
// Setup CSRF header for all jQuery AJAX requests
|
||||
$.ajaxSetup({
|
||||
beforeSend: function(xhr, settings) {
|
||||
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
|
||||
xhr.setRequestHeader("X-CSRFToken", csrftoken);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{# Favicon #}
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
|
||||
<!-- {# C3 CSS #}-->
|
||||
<!-- <link id="css-c3" href="{% static 'css/c3.css' %}" rel="stylesheet" type="text/css"/>-->
|
||||
<!-- {# EP CSS #}-->
|
||||
<!-- <link id="css-pps_white_general" href="{% static 'css/epp.css' %}" rel="stylesheet" type="text/css"/>-->
|
||||
<!-- {# C3 CSS #}-->
|
||||
<!-- <link id="css-c3" href="{% static 'css/c3.css' %}" rel="stylesheet" type="text/css"/>-->
|
||||
<!-- {# EP CSS #}-->
|
||||
<!-- <link id="css-pps_white_general" href="{% static 'css/epp.css' %}" rel="stylesheet" type="text/css"/>-->
|
||||
|
||||
|
||||
{# General EP JS #}
|
||||
@ -29,21 +41,23 @@
|
||||
<script src="{% static 'js/jquery-bootstrap-modal-steps.js' %}"></script>
|
||||
|
||||
{% if not debug %}
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//matomo.envipath.com/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '7']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function () {
|
||||
var u = "//matomo.envipath.com/";
|
||||
_paq.push(['setTrackerUrl', u + 'matomo.php']);
|
||||
_paq.push(['setSiteId', '7']);
|
||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||
g.async = true;
|
||||
g.src = u + 'matomo.js';
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
{% endif %}
|
||||
|
||||
</head>
|
||||
@ -52,13 +66,13 @@
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header navbar-header-framework">
|
||||
<!-- <button type="button" class="navbar-toggle navbar-toggle-framework" data-toggle="collapse"-->
|
||||
<!-- data-target="#navbarCollapse">-->
|
||||
<!-- <span class="sr-only">Toggle navigation</span>-->
|
||||
<!-- <span class="icon-bar"></span>-->
|
||||
<!-- <span class="icon-bar"></span>-->
|
||||
<!-- <span class="icon-bar"></span>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button type="button" class="navbar-toggle navbar-toggle-framework" data-toggle="collapse"-->
|
||||
<!-- data-target="#navbarCollapse">-->
|
||||
<!-- <span class="sr-only">Toggle navigation</span>-->
|
||||
<!-- <span class="icon-bar"></span>-->
|
||||
<!-- <span class="icon-bar"></span>-->
|
||||
<!-- <span class="icon-bar"></span>-->
|
||||
<!-- </button>-->
|
||||
<a id="pictureLink" href="{{ meta.server_url }}" class="navbar-brand">
|
||||
<img id="image-logo-short-white.svg" src='{% static "/images/logo-short-white.svg" %}' width="100"
|
||||
alt="enviPath">
|
||||
@ -95,16 +109,16 @@
|
||||
<li><a href="{{ meta.server_url }}/reaction" id="reactionLink">Reaction</a></li>
|
||||
<li><a href="{{ meta.server_url }}/model" id="relative-reasoningLink">Model</a></li>
|
||||
<li><a href="{{ meta.server_url }}/scenario" id="scenarioLink">Scenario</a></li>
|
||||
<li><a href="{{ meta.server_url }}/setting" id="settingLink">Setting</a></li>
|
||||
<!-- <li><a href="{{ meta.server_url }}/user" id="userLink">User</a></li>-->
|
||||
<!-- <li><a href="{{ meta.server_url }}/group" id="groupLink">Group</a></li>-->
|
||||
{# <li><a href="{{ meta.server_url }}/setting" id="settingLink">Setting</a></li>#}
|
||||
{# <li><a href="{{ meta.server_url }}/user" id="userLink">User</a></li>#}
|
||||
{# <li><a href="{{ meta.server_url }}/group" id="groupLink">Group</a></li>#}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right navbar-nav-framework navbar-right-framework">
|
||||
<!-- <li><a href="{{ meta.server_url }}/search" id="searchLink">Search</a></li>-->
|
||||
{# <li><a href="{{ meta.server_url }}/search" id="searchLink">Search</a></li>#}
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Info <b class="caret"></b></a>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
@ -120,31 +134,33 @@
|
||||
</ul>
|
||||
</li>
|
||||
{% if meta.user.username == 'anonymous' %}
|
||||
<li>
|
||||
<a href="#signup" id="loginButton" data-toggle="modal" data-target="#signupmodal"
|
||||
style="margin-right:10px">Login</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#signup" id="loginButton" data-toggle="modal" data-target="#signupmodal"
|
||||
style="margin-right:10px">Login</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" id="loggedInButton" class="dropdown-toggle" id="logedInButton" href="#">
|
||||
<div id="username">
|
||||
{{ user.username }}<b class="caret"></b>
|
||||
</div>
|
||||
</a>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
<li>
|
||||
<a href="{{ meta.user.url }}" id="accountbutton">My Account</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<form class="navbar-form navbar-left navbar-left-framework" role="logout" action="{{ meta.user.url }}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<input type="hidden" name="logout" value="true">
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" id="loggedInButton" class="dropdown-toggle" id="logedInButton"
|
||||
href="#">
|
||||
<div id="username">
|
||||
{{ user.username }}<b class="caret"></b>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Logout</button>
|
||||
</form>
|
||||
</ul>
|
||||
</li>
|
||||
</a>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
<li>
|
||||
<a href="{{ meta.user.url }}" id="accountbutton">My Account</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<form class="navbar-form navbar-left navbar-left-framework" role="logout"
|
||||
action="{{ meta.user.url }}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<input type="hidden" name="logout" value="true">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Logout</button>
|
||||
</form>
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -152,26 +168,26 @@
|
||||
</nav>
|
||||
<div id="docContent" class="content container">
|
||||
{% if breadcrumbs %}
|
||||
<div id="bread">
|
||||
<ol class="breadcrumb">
|
||||
{% for elem in breadcrumbs %}
|
||||
{% for name, url in elem.items %}
|
||||
{% if forloop.parentloop.last %}
|
||||
<li class="active">{{ name }}</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="{{ url }}">{{ name }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<div id="bread">
|
||||
<ol class="breadcrumb">
|
||||
{% for elem in breadcrumbs %}
|
||||
{% for name, url in elem.items %}
|
||||
{% if forloop.parentloop.last %}
|
||||
<li class="active">{{ name }}</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="{{ url }}">{{ name }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</ol>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if message %}
|
||||
<div id="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
<div id="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
@ -206,19 +222,26 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ul class="nav nav-pills nav-justified">
|
||||
<!-- <li><a href="https://envipath.com/imprint/" target="_blank">Impressum/Imprint</a></li>-->
|
||||
<!-- <li><a href="https://envipath.com/imprint/" target="_blank">Impressum/Imprint</a></li>-->
|
||||
<li><a href="mailto:admin@envipath.org" target="_blank">Contact</a></li>
|
||||
<!-- <li><a href="http://envipath.com" target="_blank"> enviPath UG (haftungsbeschränkt) & Co. KG ©-->
|
||||
<!-- {{ YEAR }}</a></li>-->
|
||||
<!-- <li><a href="http://envipath.com" target="_blank"> enviPath UG (haftungsbeschränkt) & Co. KG ©-->
|
||||
<!-- {{ YEAR }}</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// Hide actionsbutton if theres no action defined
|
||||
if ($('#actionsButton ul').children().length > 0) {
|
||||
$('#actionsButton').show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% block modals %}
|
||||
{% include "modals/cite_modal.html" %}
|
||||
{% include "modals/signup_modal.html" %}
|
||||
{% include "modals/predict_modal.html" %}
|
||||
{% include "modals/batch_predict_modal.html" %}
|
||||
{% include "modals/cite_modal.html" %}
|
||||
{% include "modals/signup_modal.html" %}
|
||||
{% include "modals/predict_modal.html" %}
|
||||
{% include "modals/batch_predict_modal.html" %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,139 +2,166 @@
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<!-- TODO rename ids as well as remove pathways if modal is closed!-->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<!-- TODO rename ids as well as remove pathways if modal is closed!-->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<h1>
|
||||
<img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</h1>
|
||||
<p>enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways. The pathway prediction system
|
||||
provides different relative reasoning models to predict likely biotransformation
|
||||
pathways and products. You can try it out below.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">Learn more >></a>
|
||||
</p>
|
||||
</div>
|
||||
<p></p>
|
||||
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="jumbotron">
|
||||
<h1>
|
||||
<img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</h1>
|
||||
<p>enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways. The pathway prediction system
|
||||
provides different relative reasoning models to predict likely biotransformation
|
||||
pathways and products. You can try it out below.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">Learn more >></a>
|
||||
</p>
|
||||
</div>
|
||||
<input type="text" class="form-control" id='index-form-text-input' placeholder="Enter a SMILES to predict a Pathway or type something to search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="dropdown-predict">Predict</a></li>
|
||||
<li><a id="dropdown-search">Search</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!</button>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" id='index-form-text-input'
|
||||
placeholder="Enter a SMILES to predict a Pathway or type something to search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="dropdown-predict">Predict</a></li>
|
||||
<li><a id="dropdown-search">Search</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
||||
</form>
|
||||
<div id="loading"></div>
|
||||
<script language="javascript">
|
||||
var currentPackage = "{{ meta.current_package.url }}";
|
||||
|
||||
<div id="loading"></div>
|
||||
<script language="javascript">
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
var action = $('#action-button').text().trim();
|
||||
|
||||
var action = $('#action-button').text().trim();
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
if (textSmiles === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (action != 'Search' && ketcherSmiles != '' && textSmiles != ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
|
||||
if (action !== 'Search' && ketcherSmiles !== '' && textSmiles !== ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
}
|
||||
|
||||
if (action === 'Search') {
|
||||
var par = {};
|
||||
par['search'] = textSmiles;
|
||||
par['mode'] = 'text';
|
||||
var queryString = $.param(par, true);
|
||||
window.location.href = "/search?" + queryString;
|
||||
} else {
|
||||
$('#index-form-smiles').val(textSmiles);
|
||||
$('#index-form').submit();
|
||||
}
|
||||
}
|
||||
|
||||
if (action == 'Search') {
|
||||
console.log("Searching...");
|
||||
} else {
|
||||
console.log("Predicting");
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
|
||||
if (dropdownVal === 'Search') {
|
||||
$("#index-form").attr("action", '/search');
|
||||
$("#index-form").attr("method", 'GET');
|
||||
} else {
|
||||
$("#index-form").attr("action", currentPackage + "/pathway");
|
||||
}
|
||||
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
|
||||
}
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
$(function () {
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
}
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
|
||||
$(function() {
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
// add a listener that gets triggered whenever the structure in ketcher has changed
|
||||
$('#index-form-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: ketcherToTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
// add a listener that gets triggered whenever the structure in ketcher has changed
|
||||
$('#index-form-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: ketcherToTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
189
templates/login.html
Normal file
189
templates/login.html
Normal file
@ -0,0 +1,189 @@
|
||||
{% load static %}
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login Modal with Blur</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap 3.3.7 CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-blur {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('{% static "/images/enviPy-screenshot.png" %}') no-repeat center center/cover;
|
||||
filter: blur(8px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Optional: dim layer */
|
||||
.bg-dim {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.center-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Blurred Background -->
|
||||
<div class="bg-blur"></div>
|
||||
<div class="bg-dim"></div>
|
||||
|
||||
<!-- Trigger Button -->
|
||||
<div class="center-button">
|
||||
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#signupmodal">Login / Sign Up</button>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap Modal -->
|
||||
<div class="modal fade bs-modal-sm" id="signupmodal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="mySmallModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<br>
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#signin" data-toggle="tab">Sign In</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#signup" data-toggle="tab">Register</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#why" data-toggle="tab">Why?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="tab-pane fade active in" id="signin">
|
||||
<form class="form-horizontal" method="post" action="{{ meta.server_url }}/user">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<input type="hidden" name="login" id="login" value="true"/>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="username">Username:</label>
|
||||
<div class="controls">
|
||||
<input required id="username" name="username" type="text"
|
||||
class="form-control"
|
||||
placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput" name="password" class="form-control"
|
||||
type="password" placeholder="********"
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" class="btn btn-success">Sign In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Why tab -->
|
||||
<div class="tab-pane fade in" id="why">
|
||||
<p>After you register, you have more permissions on
|
||||
this site, e.g., can create your own
|
||||
packages, submit data for review, and set access
|
||||
permissions to your data.</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<br> Please
|
||||
contact <a href="mailto:admin@envipath.org">admin@envipath.org</a>
|
||||
if you have any questions.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Register -->
|
||||
<div class="tab-pane fade"
|
||||
id="signup">
|
||||
<div id="passwordGuideline" class="alert alert-info">
|
||||
The password must contain 8 to 30 characters<br>
|
||||
The following characters are allowed:
|
||||
- Upper and lower case characters<br>
|
||||
- Digits<br>
|
||||
- Special characters _, -, +<br>
|
||||
|
||||
</div>
|
||||
|
||||
<form id="signup-action" class="form-horizontal" action="{{ meta.server_url }}/user"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="register" id="register" value="true"/>
|
||||
|
||||
<label class="control-label" for="userid">Username:</label>
|
||||
<input id="userid" name="username" class="form-control" type="text"
|
||||
placeholder="user" required autocomplete="username">
|
||||
|
||||
<label class="control-label" for="email">Email:</label>
|
||||
<input id="email" name="email" class="form-control" type="email"
|
||||
placeholder="user@envipath.org" required>
|
||||
|
||||
<label class="control-label" for="password">Password:</label>
|
||||
<input id="password" name="password" class="form-control" type="password"
|
||||
placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<label class="control-label" for="rpassword">Repeat Password:</label>
|
||||
<input id="rpassword" name="rpassword" class="form-control" type="password"
|
||||
placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="confirmsignup"></label>
|
||||
<div class="controls">
|
||||
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign
|
||||
Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<center>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap 3.3.7 JS + jQuery -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
templates/modals/collections/new_edge_modal.html
Normal file
0
templates/modals/collections/new_edge_modal.html
Normal file
0
templates/modals/collections/new_node_modal.html
Normal file
0
templates/modals/collections/new_node_modal.html
Normal file
@ -16,23 +16,11 @@
|
||||
<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>
|
||||
<!-- TODO Ruletypes -->
|
||||
<!-- TODO Decide on rules to use?-->
|
||||
<div id="rule-smirks-viz"></div>
|
||||
<input type="hidden" name="rule-type" id="rule-type" value="SimpleAmbitRule">
|
||||
|
||||
<!-- <select id="rule-type" name="rule-type" class="form-control" data-width='100%'>-->
|
||||
<!-- <option disabled selected>Select Rule Type</option>-->
|
||||
<!-- {% for k, v in rule_types.items %}-->
|
||||
<!-- <option value="{{ v }}">{{ k }}</option>-->
|
||||
<!-- {% endfor %}-->
|
||||
<!-- </select>-->
|
||||
<!-- -->
|
||||
<div>
|
||||
<iframe id="new_rule_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="rule-smirks" id="rule-smirks">
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
@ -47,13 +35,36 @@
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#rule-smirks').on('input', function(e) {
|
||||
$('#rule-smirks-viz').empty()
|
||||
|
||||
smirks = $('#rule-smirks').val()
|
||||
|
||||
const img = new Image();
|
||||
img.src = "{% url 'depict' %}?is_query_smirks=true&smirks=" + encodeURIComponent(smirks);
|
||||
img.style.width = '100%';
|
||||
img.style.height = '100%';
|
||||
img.style.objectFit = 'cover';
|
||||
|
||||
img.onload = function () {
|
||||
$('#rule-smirks-viz').append(img);
|
||||
};
|
||||
|
||||
img.onerror = function () {
|
||||
error_tpl = `
|
||||
<div class="alert alert-error" role="alert">
|
||||
<h4 class="alert-heading">Could not render SMIRKS!</h4>
|
||||
<p>Could not render SMIRKS - Have you entered a valid SMIRKS?</a>
|
||||
</p>
|
||||
</div>`
|
||||
$('#rule-smirks-viz').append(error_tpl);
|
||||
};
|
||||
});
|
||||
|
||||
$('#new_rule_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
k = getKetcher('new_rule_ketcher');
|
||||
$('#rule-smirks').val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$('#new_rule_modal_form').submit();
|
||||
});
|
||||
|
||||
126
templates/modals/objects/add_pathway_edge_modal.html
Normal file
126
templates/modals/objects/add_pathway_edge_modal.html
Normal file
@ -0,0 +1,126 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_modal"
|
||||
aria-modal="true"
|
||||
role="dialog">
|
||||
<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">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 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 }}</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 }}</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>
|
||||
<script>
|
||||
|
||||
function reactionImage() {
|
||||
var substrates = [];
|
||||
$('#add_pathway_edge_substrates option:selected').each(function () {
|
||||
var smiles = $(this).data('smiles'); // read data-smiles attribute
|
||||
substrates.push(smiles);
|
||||
});
|
||||
|
||||
var products = []
|
||||
$('#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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
78
templates/modals/objects/add_pathway_node_modal.html
Normal file
78
templates/modals/objects/add_pathway_node_modal.html
Normal file
@ -0,0 +1,78 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="add_pathway_node_modal" tabindex="-1" aria-labelledby="add_pathway_node_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-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">Add a Node</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="add_pathway_node_modal_form" accept-charset="UTF-8" action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="node-name">Name</label>
|
||||
<input id="node-name" class="form-control" name="node-name" placeholder="Name"/>
|
||||
<label for="node-description">Description</label>
|
||||
<input id="node-description" class="form-control" name="node-description" placeholder="Description"/>
|
||||
<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>
|
||||
<script>
|
||||
|
||||
function newStructureModalketcherToNewStructureModalTextInput() {
|
||||
$('#node-smiles').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#add_node_ketcher').on('load', function() {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: newStructureModalketcherToNewStructureModalTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
})
|
||||
|
||||
$(function() {
|
||||
$('#add_pathway_node_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
|
||||
|
||||
// submit form
|
||||
$('#add_pathway_node_modal_form').submit();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
35
templates/modals/objects/delete_model_modal.html
Normal file
35
templates/modals/objects/delete_model_modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<!-- Delete Model -->
|
||||
<div id="delete_model_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Model</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Model.
|
||||
<form id="delete-model-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-model"/>
|
||||
</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="delete-model-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
$('#delete-model-modal-submit').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#delete-model-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
35
templates/modals/objects/delete_node_modal.html
Normal file
35
templates/modals/objects/delete_node_modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<!-- Delete Node -->
|
||||
<div id="delete_node_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Node</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Node as well as ingoing and outgoing edges.
|
||||
<form id="delete-node-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-node"/>
|
||||
</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="delete-node-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
$('#delete-node-modal-submit').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#delete-node-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
65
templates/modals/objects/delete_pathway_edge_modal.html
Normal file
65
templates/modals/objects/delete_pathway_edge_modal.html
Normal file
@ -0,0 +1,65 @@
|
||||
{% load static %}
|
||||
<!-- Delete Edge -->
|
||||
<div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Edge</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Edge. Nodes referenced by this edge will remain.
|
||||
<p></p>
|
||||
<form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<select id="delete_pathway_edge_edges" name="edge-url"
|
||||
data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option value="" disabled selected>Select Reaction to delete</option>
|
||||
{% for e in pathway.edges %}
|
||||
<option value="{{ e.url }}">{{ e.edge_label.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-edge"/>
|
||||
</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>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#delete_pathway_edge_edges").selectpicker();
|
||||
|
||||
$("#delete_pathway_edge_edges").on('change', function (e) {
|
||||
edge_url = $('#delete_pathway_edge_edges option:selected').val()
|
||||
|
||||
if (edge_url !== "") {
|
||||
$('#delete_pathway_edge_image').empty();
|
||||
$('#delete_pathway_edge_image').append(
|
||||
"<img width='100%' src='" + edge_url + "?image=svg'>"
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
$('#delete-pathway-edge-modal-submit').click(function (e) {
|
||||
e.preventDefault();
|
||||
edge_url = $('#delete_pathway_edge_edges option:selected').val()
|
||||
|
||||
if (edge_url === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#delete-pathway-edge-modal-form').attr('action', edge_url)
|
||||
$('#delete-pathway-edge-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
35
templates/modals/objects/delete_pathway_modal.html
Normal file
35
templates/modals/objects/delete_pathway_modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<!-- Delete Pathway -->
|
||||
<div id="delete_pathway_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Pathway</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Pathway together with all Nodes and Edges.
|
||||
<form id="delete-pathway-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-pathway"/>
|
||||
</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="delete-pathway-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
$('#delete-pathway-modal-submit').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#delete-pathway-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
65
templates/modals/objects/delete_pathway_node_modal.html
Normal file
65
templates/modals/objects/delete_pathway_node_modal.html
Normal file
@ -0,0 +1,65 @@
|
||||
{% load static %}
|
||||
<!-- Delete Node -->
|
||||
<div id="delete_pathway_node_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Node</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Node. Edges having this Node as Substrate or Product will be removed as well.
|
||||
<p></p>
|
||||
<form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<select id="delete_pathway_node_nodes" name="node-url"
|
||||
data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option value="" disabled selected>Select Compound to delete</option>
|
||||
{% for n in pathway.nodes %}
|
||||
<option value="{{ n.url }}">{{ n.default_node_label.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-node"/>
|
||||
</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>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#delete_pathway_node_nodes").selectpicker();
|
||||
|
||||
$("#delete_pathway_node_nodes").on('change', function (e) {
|
||||
node_url = $('#delete_pathway_node_nodes option:selected').val()
|
||||
|
||||
if (node_url !== "") {
|
||||
$('#delete_pathway_node_image').empty();
|
||||
$('#delete_pathway_node_image').append(
|
||||
"<img width='100%' src='" + node_url + "?image=svg'>"
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
$('#delete-pathway-node-modal-submit').click(function (e) {
|
||||
e.preventDefault();
|
||||
node_url = $('#delete_pathway_node_nodes option:selected').val()
|
||||
|
||||
if (node_url === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#delete-pathway-node-modal-form').attr('action', node_url)
|
||||
$('#delete-pathway-node-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
35
templates/modals/objects/delete_reaction_modal.html
Normal file
35
templates/modals/objects/delete_reaction_modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<!-- Delete Reaction -->
|
||||
<div id="delete_reaction_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Reaction</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Reaction.
|
||||
<form id="delete-reaction-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-reaction"/>
|
||||
</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="delete-reaction-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
$('#delete-reaction-modal-submit').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#delete-reaction-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
@ -4,13 +4,13 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Compound</h5>
|
||||
<h5 class="modal-title">Edit Compound</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit a Compound.</p>
|
||||
<p>Edit Compound.</p>
|
||||
<form id="edit-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
|
||||
46
templates/modals/objects/edit_node_modal.html
Normal file
46
templates/modals/objects/edit_node_modal.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% load static %}
|
||||
<!-- Edit Node -->
|
||||
<div id="edit_node_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Edit Node</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit Node.</p>
|
||||
<form id="edit-node-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="node-name">Name</label>
|
||||
<input id="node-name" class="form-control" name="node-name" value="{{ node.name}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="node-description">Description</label>
|
||||
<input id="node-description" type="text" class="form-control"
|
||||
value="{{ node.description }}"
|
||||
name="node-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-node-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-node-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-node-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
43
templates/modals/objects/edit_pathway_modal.html
Normal file
43
templates/modals/objects/edit_pathway_modal.html
Normal file
@ -0,0 +1,43 @@
|
||||
{% load static %}
|
||||
<!-- Edit Pathway -->
|
||||
<div id="edit_pathway_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Edit Pathway</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit Pathway.</p>
|
||||
<form id="edit-pathway-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="pathway-name">Name</label>
|
||||
<input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="pathway-description">Description</label>
|
||||
<textarea id="pathway-description" type="text" class="form-control" name="pathway-description"
|
||||
rows="10">{{ pathway.description }}</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>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-pathway-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-pathway-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
@ -10,7 +10,6 @@
|
||||
<h3 class="modal-title">Update Reaction</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- <p>Edit a Reaction.</p>-->
|
||||
<form id="edit-reaction-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
{% load static %}
|
||||
<!-- Edit Rule -->
|
||||
<div id="edit_rule_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h3 class="modal-title">Update Rule</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="edit-rule-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="rule-name">Name</label>
|
||||
<input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="rule-description">Description</label>
|
||||
<input id="rule-description" type="text" class="form-control"
|
||||
value="{{ rule.description }}" 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>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-rule-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-rule-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -70,7 +70,6 @@ $(function() {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = $('#request_api_token_form').serialize();
|
||||
console.log(formData)
|
||||
$.post('', formData, function(response) {
|
||||
$('#new-token-pre').text(response.raw_token);
|
||||
$('#new-token').show();
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ rule.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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
|
||||
|
||||
@ -2,135 +2,141 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_compound_modal.html" %}
|
||||
{% include "modals/objects/add_structure_modal.html" %}
|
||||
{% include "modals/objects/delete_compound_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_compound_modal.html" %}
|
||||
{% include "modals/objects/add_structure_modal.html" %}
|
||||
{% include "modals/objects/delete_compound_modal.html" %}
|
||||
{% 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 }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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 >></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 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 }}
|
||||
</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 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 }}
|
||||
<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>
|
||||
|
||||
<!-- 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 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
|
||||
>></a>
|
||||
</p>
|
||||
</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 }}
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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 id="compound-desc" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ compound.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 }} <i>({{ r.package.name }})</i></a>
|
||||
{% endfor %}
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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 }} <i>({{ r.package.name }})</i></a>
|
||||
{% endfor %}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- External Identifiers -->
|
||||
<!-- 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 }} <i>({{ r.package.name }})</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 }} <i>({{ r.package.name }})</i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- External Identifiers -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ compound_structure.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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
|
||||
|
||||
0
templates/objects/edge.html
Normal file
0
templates/objects/edge.html
Normal file
@ -13,7 +13,7 @@
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ group.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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
|
||||
|
||||
@ -1,263 +1,322 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% load envipytags %}
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% endblock action_modals %}
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/delete_model_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<!-- Include required libs -->
|
||||
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
|
||||
<!-- Include required libs -->
|
||||
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
|
||||
|
||||
<div class="panel-group" id="model-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ model.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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 %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ model.description }} </p>
|
||||
</div>
|
||||
<!-- Predict Panel -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#predict-smiles">Predict</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="predict-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<input id="smiles-to-predict" type="text" class="form-control" placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
|
||||
</span>
|
||||
<div class="panel-group" id="model-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ model.name }}
|
||||
<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/model.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
<div id="predictResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Predict Panel -->
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
<!-- Single Gen Curve Panel -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#sg-curve">Predict</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="sg-curve" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<!-- Center container contents -->
|
||||
<div class="container" style="display: flex;justify-content: center;">
|
||||
<div id="sg-curve-plotdiv" class="chart">
|
||||
<div id="sg-chart"></div>
|
||||
<div class="panel-body">
|
||||
<p> {{ model.description }} </p>
|
||||
</div>
|
||||
{% if model|classname == 'MLRelativeReasoning' %}
|
||||
<!-- Rule Packages -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-package-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#rule-package">Rule Packages</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.rule_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reaction Packages -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="reaction-package-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#reaction-package">Rule Packages</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="reaction-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.data_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if model.eval_packages.all|length > 0 %}
|
||||
<!-- Eval Packages -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="eval-package-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#eval-package">Rule Packages</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="eval-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.eval_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Model Status -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="model-status-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#model-status">Model Status</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="model-status" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ model.status }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Predict Panel -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#predict-smiles">Predict</a>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
if(!($('#sg-chart').length > 0)) {
|
||||
return;
|
||||
}
|
||||
console.log($('#sg-chart').length)
|
||||
//$('#sg-curve-plotdiv').empty();
|
||||
<div id="predict-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<input id="smiles-to-predict" type="text" class="form-control"
|
||||
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
<div id="predictResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Predict Panel -->
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
<!-- Single Gen Curve Panel -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
|
||||
href="#sg-curve">Precision Recall Curve</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="sg-curve" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<!-- Center container contents -->
|
||||
<div class="container" style="display: flex;justify-content: center;">
|
||||
<div id="sg-curve-plotdiv" class="chart">
|
||||
<div id="sg-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
var x = ['Recall'];
|
||||
var y = ['Precision'];
|
||||
var thres = ['threshold'];
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
if (!($('#sg-chart').length > 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Compare function for the given array
|
||||
function compare(a, b) {
|
||||
if (a.threshold < b.threshold)
|
||||
var x = ['Recall'];
|
||||
var y = ['Precision'];
|
||||
var thres = ['threshold'];
|
||||
|
||||
// Compare function for the given array
|
||||
function compare(a, b) {
|
||||
if (a.threshold < b.threshold)
|
||||
return -1;
|
||||
else if (a.threshold > b.threshold)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getIndexForValue(data, val, val_name) {
|
||||
for (var idx in data) {
|
||||
if (data[idx][val_name] == val) {
|
||||
return idx;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
else if (a.threshold > b.threshold)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getIndexForValue(data, val, val_name) {
|
||||
for(var idx in data) {
|
||||
if(data[idx][val_name] == val) {
|
||||
return idx;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
var data = {{ model.pr_curve|safe }}
|
||||
var dataLength = Object.keys(data).length;
|
||||
data.sort(compare);
|
||||
var data = {{ model.pr_curve|safe }}
|
||||
var dataLength = Object.keys(data).length;
|
||||
data.sort(compare);
|
||||
|
||||
for (var idx in data) {
|
||||
var d = data[idx];
|
||||
x.push(d.recall);
|
||||
y.push(d.precision);
|
||||
thres.push(d.threshold);
|
||||
}
|
||||
var chart = c3.generate({
|
||||
bindto: '#sg-chart',
|
||||
data: {
|
||||
onclick: function (d, e) {
|
||||
var idx = d.index;
|
||||
var thresh = data[dataLength-idx-1].threshold;
|
||||
for (var idx in data) {
|
||||
var d = data[idx];
|
||||
x.push(d.recall);
|
||||
y.push(d.precision);
|
||||
thres.push(d.threshold);
|
||||
}
|
||||
var chart = c3.generate({
|
||||
bindto: '#sg-chart',
|
||||
data: {
|
||||
onclick: function (d, e) {
|
||||
var idx = d.index;
|
||||
var thresh = data[dataLength - idx - 1].threshold;
|
||||
|
||||
//onclick(thresh)
|
||||
//onclick(thresh)
|
||||
|
||||
},
|
||||
x: 'Recall',
|
||||
y: 'Precision',
|
||||
columns: [
|
||||
x,
|
||||
y,
|
||||
//thres
|
||||
]
|
||||
},
|
||||
size: {
|
||||
height: 400, // TODO: Make variable to current modal width
|
||||
width: 480
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Recall',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
},
|
||||
y: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Precision',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
}
|
||||
},
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
title: function (recall) {
|
||||
idx = getIndexForValue(data, recall, "recall");
|
||||
if(idx != -1) {
|
||||
return "Threshold: " + data[idx].threshold;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
value: function (precision, ratio, id) {
|
||||
return undefined;
|
||||
x: 'Recall',
|
||||
y: 'Precision',
|
||||
columns: [
|
||||
x,
|
||||
y,
|
||||
//thres
|
||||
]
|
||||
},
|
||||
size: {
|
||||
height: 400, // TODO: Make variable to current modal width
|
||||
width: 480
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Recall',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
},
|
||||
y: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Precision',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
}
|
||||
},
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
title: function (recall) {
|
||||
idx = getIndexForValue(data, recall, "recall");
|
||||
if (idx != -1) {
|
||||
return "Threshold: " + data[idx].threshold;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
value: function (precision, ratio, id) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- End Single Gen Curve Panel -->
|
||||
{% endif %}
|
||||
</script>
|
||||
<!-- End Single Gen Curve Panel -->
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
|
||||
function handleResponse(data) {
|
||||
res = "<table class='table table-striped'>"
|
||||
res += "<thead>"
|
||||
res += "<th scope='col'>#</th>"
|
||||
function handleResponse(data) {
|
||||
res = "<table class='table table-striped'>"
|
||||
res += "<thead>"
|
||||
res += "<th scope='col'>#</th>"
|
||||
|
||||
columns = ['products', 'image', 'probability', 'btrule']
|
||||
columns = ['products', 'image', 'probability', 'btrule']
|
||||
|
||||
for(col in columns) {
|
||||
res += "<th scope='col'>" + columns[col] + "</th>"
|
||||
}
|
||||
|
||||
res += "</thead>"
|
||||
res += "<tbody>"
|
||||
var cnt = 1;
|
||||
for(transformation in data) {
|
||||
res += "<tr>"
|
||||
res += "<th scope='row'>" + cnt + "</th>"
|
||||
res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
|
||||
res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
|
||||
res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
|
||||
if (data[transformation]['btrule'] != null) {
|
||||
res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
|
||||
} else {
|
||||
res += "<th scope='row'>N/A</th>"
|
||||
}
|
||||
res += "</tr>"
|
||||
cnt += 1;
|
||||
}
|
||||
|
||||
res += "</tbody>"
|
||||
res += "</table>"
|
||||
$("#predictResultTable").append(res);
|
||||
}
|
||||
|
||||
function clear() {
|
||||
$("#predictResultTable").removeClass("alert alert-danger");
|
||||
$("#predictResultTable").empty();
|
||||
}
|
||||
|
||||
if($('#predict-button').length > 0) {
|
||||
$("#predict-button").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
data = {
|
||||
"smiles": $("#smiles-to-predict").val(),
|
||||
"classify": "ILikeCats!"
|
||||
for (col in columns) {
|
||||
res += "<th scope='col'>" + columns[col] + "</th>"
|
||||
}
|
||||
|
||||
clear();
|
||||
res += "</thead>"
|
||||
res += "<tbody>"
|
||||
var cnt = 1;
|
||||
for (transformation in data) {
|
||||
res += "<tr>"
|
||||
res += "<th scope='row'>" + cnt + "</th>"
|
||||
res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
|
||||
res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
|
||||
res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
|
||||
if (data[transformation]['btrule'] != null) {
|
||||
res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
|
||||
} else {
|
||||
res += "<th scope='row'>N/A</th>"
|
||||
}
|
||||
res += "</tr>"
|
||||
cnt += 1;
|
||||
}
|
||||
|
||||
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type : 'get',
|
||||
data : data,
|
||||
url : '',
|
||||
success: function(data, textStatus) {
|
||||
try {
|
||||
$("#loading").empty();
|
||||
handleResponse(data);
|
||||
} catch (error) {
|
||||
console.log("Error");
|
||||
res += "</tbody>"
|
||||
res += "</table>"
|
||||
$("#predictResultTable").append(res);
|
||||
}
|
||||
|
||||
function clear() {
|
||||
$("#predictResultTable").removeClass("alert alert-danger");
|
||||
$("#predictResultTable").empty();
|
||||
}
|
||||
|
||||
if ($('#predict-button').length > 0) {
|
||||
$("#predict-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
data = {
|
||||
"smiles": $("#smiles-to-predict").val(),
|
||||
"classify": "ILikeCats!"
|
||||
}
|
||||
|
||||
clear();
|
||||
|
||||
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
data: data,
|
||||
url: '',
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#loading").empty();
|
||||
handleResponse(data);
|
||||
} catch (error) {
|
||||
console.log("Error");
|
||||
$("#loading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append("Error while processing request :/");
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
$("#loading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append("Error while processing request :/");
|
||||
}
|
||||
},
|
||||
error : function(jqXHR, textStatus, errorThrown) {
|
||||
$("#loading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append("Error while processing request :/");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
75
templates/objects/node.html
Normal file
75
templates/objects/node.html
Normal file
@ -0,0 +1,75 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_node_modal.html" %}
|
||||
{% include "modals/objects/delete_node_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="node-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ node.name }}
|
||||
<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/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 -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="node-desc-link" data-toggle="collapse" data-parent="#node-detail"
|
||||
href="#node-desc">Description</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="node-desc" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ node.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="node-image-link" data-toggle="collapse" data-parent="#node-detail"
|
||||
href="#node-image">Image Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="node-image" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div id="image-div" align="center">
|
||||
{{ node.default_node_label.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="node-smiles-link" data-toggle="collapse" data-parent="#node-detail"
|
||||
href="#node-smiles">SMILES Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="node-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ node.default_node_label.smiles }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ package.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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
|
||||
|
||||
@ -1,113 +1,182 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% load static %}
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg { width: 100%; height: 600px; color: red;}
|
||||
.link { stroke: #999; stroke-opacity: 0.6; marker-end: url(#arrow); }
|
||||
.link_no_arrow { stroke: #999; stroke-opacity: 0.6; }
|
||||
.node image { cursor: pointer; }
|
||||
.node circle { fill: lightblue; stroke: steelblue; stroke-width: 1.5px; }
|
||||
.highlighted { stroke: red; stroke-width: 3px; }
|
||||
.tooltip { position: absolute; background: lightgrey; padding: 5px; border-radius: 5px; visibility: hidden; opacity: 1}
|
||||
</style>
|
||||
<script src="{% static 'js/pw.js' %}"></script>
|
||||
{% load static %}
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
<p></p>
|
||||
.link {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
marker-end: url(#arrow);
|
||||
}
|
||||
|
||||
<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 }}
|
||||
</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">
|
||||
.link_no_arrow {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
|
||||
.node image {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node circle {
|
||||
fill: lightblue;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
background: lightgrey;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
visibility: hidden;
|
||||
opacity: 1
|
||||
}
|
||||
</style>
|
||||
<script src="{% static 'js/pw.js' %}"></script>
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/add_pathway_node_modal.html" %}
|
||||
{% include "modals/objects/add_pathway_edge_modal.html" %}
|
||||
{% include "modals/objects/edit_pathway_modal.html" %}
|
||||
{% include "modals/objects/delete_pathway_node_modal.html" %}
|
||||
{% include "modals/objects/delete_pathway_edge_modal.html" %}
|
||||
{% include "modals/objects/delete_pathway_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 }}
|
||||
</div>
|
||||
</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">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" id="showCompoundNames">
|
||||
<span class="glyphicon glyphicon-eye-open"></span> Show Compound Names</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
|
||||
<span class="glyphicon glyphicon-fullscreen"></span>Fullscreen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip" id="status"
|
||||
data-original-title="" title="" data-content="Pathway prediction complete."><span
|
||||
class="glyphicon glyphicon-ok"></span></button>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
|
||||
<span class="glyphicon glyphicon-fullscreen"></span>
|
||||
Fullscreen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{% if pathway.completed %}
|
||||
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
|
||||
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="tooltip"
|
||||
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="tooltip"
|
||||
id="status" data-original-title="" title=""
|
||||
data-content="Pathway prediction running.">
|
||||
<img height="20" src="{% static '/images/wait.gif' %}">
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div id="vizdiv">
|
||||
<svg width="2000" height="2000">
|
||||
{% if debug %}
|
||||
<rect width="100%" height="100%" fill="aliceblue"/>
|
||||
{% endif %}
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</nav>
|
||||
<div id="vizdiv">
|
||||
<svg width="2000" height="2000">
|
||||
{% if debug %}
|
||||
<rect width="100%" height="100%" fill="aliceblue"/>
|
||||
{% endif %}
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<script>
|
||||
function goFullscreen(id) {
|
||||
var element = document.getElementById(id);
|
||||
if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
function transformReferences(text) {
|
||||
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
|
||||
}
|
||||
function transformReferences(text) {
|
||||
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
|
||||
}
|
||||
|
||||
pathway = {{ pathway.d3_json | safe }};
|
||||
pathway = {{ pathway.d3_json | safe }};
|
||||
|
||||
$(function() {
|
||||
draw(pathway, 'vizdiv');
|
||||
// TODO fix somewhere else...
|
||||
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
||||
$('#DescriptionContent').html(newDesc);
|
||||
});
|
||||
$(function () {
|
||||
draw(pathway, 'vizdiv');
|
||||
// TODO fix somewhere else...
|
||||
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
||||
$('#DescriptionContent').html(newDesc);
|
||||
});
|
||||
|
||||
</script>
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
@ -2,104 +2,125 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_reaction_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_reaction_modal.html" %}
|
||||
{% include "modals/objects/delete_reaction_modal.html" %}
|
||||
{% 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 }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 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 }}
|
||||
<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>
|
||||
|
||||
<!-- 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 }}</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 }}</a>
|
||||
{% endfor %}
|
||||
<!-- 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 }}
|
||||
</div>
|
||||
</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 }}
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- 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 }}</a>
|
||||
{% endfor %}
|
||||
<!-- 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>
|
||||
<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 }}</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 }}</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 }}</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 }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ scenario.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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
|
||||
|
||||
@ -2,173 +2,184 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_rule_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_rule_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="rule-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ rule.name }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/rule.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
{{ rule.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Representation -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-image-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-image">Image Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-image" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div id="image-div" align="center">
|
||||
{{ rule.as_svg|safe }}
|
||||
<div class="panel-group" id="rule-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ rule.name }}
|
||||
<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/rule.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
{{ rule.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- SMIRKS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-smirks-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-smirks">SMIRKS Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-smirks" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.smirks }} </p>
|
||||
<!-- Representation -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-image-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-image">Image Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-image" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<div id="image-div" align="center">
|
||||
{{ rule.as_svg|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reactants SMARTS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reactants-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reactants-smarts">Reactant SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reactants-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.reactants_smarts }} </p>
|
||||
<!-- SMIRKS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-smirks-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-smirks">SMIRKS Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-smirks" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.smirks }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reactant Filter SMARTS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reactant-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reactant-filter-smarts">Reactant Filter SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reactant-filter-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.reactant_filter_smarts }} </p>
|
||||
<!-- Reactants SMARTS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reactants-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reactants-smarts">Reactant SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reactants-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.reactants_smarts }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products SMARTS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-products-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-products-smarts">Reactant SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-products-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.products_smarts }} </p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reactant Filter SMARTS -->
|
||||
{% if rule.reactant_filter_smarts %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reactant-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reactant-filter-smarts">Reactant Filter SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reactant-filter-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.reactant_filter_smarts }} </p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Product Filter SMARTS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-product-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-product-filter-smarts">Product Filter SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-product-filter-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.product_filter_smarts }} </p>
|
||||
<!-- Products SMARTS -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-products-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-products-smarts">Reactant SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-products-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.products_smarts }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Included in Composite Rules -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-composite-rule-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-composite-rule">Included in Composite Rules</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-composite-rule" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for cr in rule.parallelrule_set.all %}
|
||||
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scenarios -->
|
||||
<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 }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Product Filter SMARTS -->
|
||||
{% if rule.product_filter_smarts %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-product-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-product-filter-smarts">Product Filter SMARTS</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-product-filter-smarts" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<p> {{ rule.product_filter_smarts }} </p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Reactions -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reaction-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reaction">Reactions</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reaction" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.related_reactions %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pathways -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-pathway-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-pathway">Pathways</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-pathway" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.related_pathways %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Included in Composite Rules -->
|
||||
{% if rule.parallelrule_set.all %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-composite-rule-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-composite-rule">Included in Composite Rules</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-composite-rule" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for cr in rule.parallelrule_set.all %}
|
||||
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 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 }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Reactions -->
|
||||
{% if rule.related_reactions %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reaction-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reaction">Reactions</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reaction" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.related_reactions %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Pathways -->
|
||||
{% if rule.related_pathways %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-pathway-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-pathway">Pathways</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-pathway" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.related_pathways %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ user.username }}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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
|
||||
|
||||
@ -1,62 +1,160 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<!--<script>-->
|
||||
<!--$(document).arrive(".selPackages", function() {-->
|
||||
<!-- // selectpicker triggers 'bootstrap-select' library-->
|
||||
<!-- $(this).selectpicker();-->
|
||||
<!--});-->
|
||||
<!--</script>-->
|
||||
|
||||
<div id=searchContent>
|
||||
<div id="packSelector">
|
||||
<label>Select Packages</label><br>
|
||||
<select id="selPackages" name="selPackages" data-actions-box='true' class="selPackages" multiple
|
||||
data-width='100%'>
|
||||
{% if unreviewed_objects %}
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% endif %}
|
||||
{% for obj in reviewed_objects %}
|
||||
<option value="{{ obj.url }}" selected>{{ obj.name }}</option>
|
||||
{% endfor %}
|
||||
{% if unreviewed_objects %}
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% endif %}
|
||||
{% for obj in unreviewed_objects %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<p></p>
|
||||
<div>
|
||||
<label>Search Term</label><br>
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<input type="text" class="form-control" id='index-form-text-input' placeholder="Benfuracarb">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="action-button"
|
||||
aria-haspopup="true" aria-expanded="false">Text <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">Text</li>
|
||||
<li><a id="dropdown-predict-text-text">Text</a></li>
|
||||
<li class="dropdown-header">SMILES</li>
|
||||
<li><a id="dropdown-search-smiles-default" data-toggle="tooltip">Default</a></li>
|
||||
<li><a id="dropdown-search-smiles-canonical">Canonical</a></li>
|
||||
<li><a id="dropdown-search-smiles-exact">Exact</a></li>
|
||||
<li class="dropdown-header">InChI</li>
|
||||
<li><a id="dropdown-search-inchi-inchikey">InChIKey</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
|
||||
</button>
|
||||
<div id=searchContent>
|
||||
<div id="packSelector">
|
||||
<label>Select Packages</label><br>
|
||||
<select id="selPackages" name="selPackages" data-actions-box='true' class="selPackages" multiple
|
||||
data-width='100%'>
|
||||
{% if unreviewed_objects %}
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% endif %}
|
||||
{% for obj in reviewed_objects %}
|
||||
<option value="{{ obj.url }}" selected>{{ obj.name }}</option>
|
||||
{% endfor %}
|
||||
{% if unreviewed_objects %}
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% endif %}
|
||||
{% for obj in unreviewed_objects %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<p></p>
|
||||
<div>
|
||||
<label>Search Term</label><br>
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<input type="text" class="form-control" id='searchbar' placeholder="Benfuracarb">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
id="mode-button"
|
||||
aria-haspopup="true" aria-expanded="false">Text <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">Text</li>
|
||||
<li><a id="dropdown-predict-text-text">Text</a></li>
|
||||
<li class="dropdown-header">SMILES</li>
|
||||
<li><a id="dropdown-search-smiles-default" data-toggle="tooltip">Default</a></li>
|
||||
<li><a id="dropdown-search-smiles-canonical">Canonical</a></li>
|
||||
<li><a id="dropdown-search-smiles-exact">Exact</a></li>
|
||||
<li class="dropdown-header">InChI</li>
|
||||
<li><a id="dropdown-search-inchi-inchikey">InChIKey</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="search-button">
|
||||
Go!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<div id="results"></div>
|
||||
<p></p>
|
||||
<div id="loading"></div>
|
||||
</div>
|
||||
<div id="results">
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function modeDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
$('#mode-button').html(dropdownVal + suffix);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
function handleSearchResponse(id, data) {
|
||||
content = `
|
||||
<div class='panel-group' id='search-accordion'>
|
||||
<div class='panel panel-default'>
|
||||
<div class='panel-heading' id='headingPanel' style='font-size:2rem;height: 46px'>
|
||||
Results
|
||||
</div>
|
||||
<div id='descDiv'></div>
|
||||
</div>`;
|
||||
|
||||
function makeContent(objs) {
|
||||
links = "";
|
||||
for (idx in objs) {
|
||||
obj = objs[idx];
|
||||
links += `<a class='list-group-item' href='${obj.url}'>${obj.name}</a>`
|
||||
}
|
||||
return links;
|
||||
}
|
||||
|
||||
allEmpty = true;
|
||||
for (key in data) {
|
||||
if (data[key].length < 1) {
|
||||
continue;
|
||||
}
|
||||
allEmpty = false;
|
||||
content += `
|
||||
<div class='panel panel-default panel-heading list-group-item' style='background-color:silver'>
|
||||
<h4 class='panel-title'>
|
||||
<a id='${key}_link' data-toggle='collapse' data-parent='#search-accordion' href='#${key}_panel'>
|
||||
${key}
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id='${key}_panel' class='panel-collapse collapse in'>
|
||||
<div class='panel-body list-group-item'>
|
||||
${makeContent(data[key])}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
if (allEmpty) {
|
||||
$('#' + id).append('<div class="alert alert-danger" role="alert"><p>' + "No results..." + '</p></div>');
|
||||
} else {
|
||||
$('#' + id).append(content);
|
||||
}
|
||||
}
|
||||
|
||||
function search(e) {
|
||||
e.preventDefault();
|
||||
|
||||
query = $("#searchbar").val()
|
||||
|
||||
if (!query) {
|
||||
// Nothing to search...
|
||||
console.log("Search phrase empty, won't do search")
|
||||
return;
|
||||
}
|
||||
|
||||
var selPacks = [];
|
||||
$("#selPackages :selected").each(function () {
|
||||
var id = this.value;
|
||||
selPacks.push(id);
|
||||
});
|
||||
|
||||
if (selPacks.length < 1) {
|
||||
console.log("No package selected, won't do search")
|
||||
return;
|
||||
}
|
||||
|
||||
var mode = $('#mode-button').text().trim().toLowerCase();
|
||||
|
||||
var par = {};
|
||||
par['packages'] = selPacks;
|
||||
par['search'] = query;
|
||||
par['mode'] = mode;
|
||||
|
||||
console.log(par);
|
||||
|
||||
var queryString = $.param(par, true);
|
||||
|
||||
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
|
||||
|
||||
$("#results").empty();
|
||||
|
||||
$.getJSON("{{ SERVER_BASE }}/search?" + queryString, function (result) {
|
||||
handleSearchResponse("results", result);
|
||||
$("#loading").empty();
|
||||
}).fail(function (d) {
|
||||
$("#loading").empty();
|
||||
console.log(d.responseText);
|
||||
handleError(JSON.parse(d.responseText));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$(function () {
|
||||
|
||||
tooltips = {
|
||||
'dropdown-predict-text-text': 'The inserted pattern will be searched on all enviPath object names and descriptions',
|
||||
@ -71,44 +169,17 @@
|
||||
placement: "top",
|
||||
title: tooltips[key]
|
||||
});
|
||||
|
||||
$('#' + key).on('click', modeDropdownClicked);
|
||||
});
|
||||
|
||||
$("#selPackages").selectpicker();
|
||||
$("#search-button").on("click", search);
|
||||
|
||||
$("#search-button").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!hasValue("searchbar")) {
|
||||
return;
|
||||
}
|
||||
|
||||
var query = $("#searchbar").val();
|
||||
|
||||
selPackages = [];
|
||||
var selPacks = $("#selPackages :selected");
|
||||
selPacks.each(function () {
|
||||
var id = this.value;
|
||||
selPackages.push(id);
|
||||
});
|
||||
|
||||
var par = {};
|
||||
par['packages'] = selPackages;
|
||||
par['search'] = query;
|
||||
var queryString = $.param(par);
|
||||
|
||||
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
|
||||
|
||||
$("#results").empty();
|
||||
|
||||
$.getJSON("{{ SERVER_BASE }}/search?" + queryString, function (result) {
|
||||
makeSearchList("#results", result);
|
||||
$("#loading").empty();
|
||||
}).fail(function (d) {
|
||||
handleError(JSON.parse(d.responseText));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
{% if search_result %}
|
||||
handleSearchResponse("results", {{ search_result|safe }});
|
||||
{% endif %}
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user