forked from enviPath/enviPy
Current Dev State
This commit is contained in:
Tim Lorsbach
4
templates/actions/collections/compound.html
Normal file
4
templates/actions/collections/compound.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_compound_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Compound</a>
|
||||
</li>
|
||||
4
templates/actions/collections/compound_structure.html
Normal file
4
templates/actions/collections/compound_structure.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_compound_structure_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Compound Structure</a>
|
||||
</li>
|
||||
4
templates/actions/collections/group.html
Normal file
4
templates/actions/collections/group.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_group_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Group</a>
|
||||
</li>
|
||||
4
templates/actions/collections/model.html
Normal file
4
templates/actions/collections/model.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_model_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Model</a>
|
||||
</li>
|
||||
4
templates/actions/collections/package.html
Normal file
4
templates/actions/collections/package.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_package_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span>New Package</a>
|
||||
</li>
|
||||
4
templates/actions/collections/pathway.html
Normal file
4
templates/actions/collections/pathway.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#predict_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Pathway</a>
|
||||
</li>
|
||||
4
templates/actions/collections/reaction.html
Normal file
4
templates/actions/collections/reaction.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_reaction_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Reaction</a>
|
||||
</li>
|
||||
4
templates/actions/collections/rule.html
Normal file
4
templates/actions/collections/rule.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_rule_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Rule</a>
|
||||
</li>
|
||||
4
templates/actions/collections/scenario.html
Normal file
4
templates/actions/collections/scenario.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_pathway_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span> New Scenario</a>
|
||||
</li>
|
||||
4
templates/actions/collections/setting.html
Normal file
4
templates/actions/collections/setting.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#new_setting_modal">
|
||||
<span class="glyphicon glyphicon-plus"></span>New Setting</a>
|
||||
</li>
|
||||
8
templates/actions/objects/compound.html
Normal file
8
templates/actions/objects/compound.html
Normal file
@ -0,0 +1,8 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_compound_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Compound</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#delete_compound_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Compound</a>
|
||||
</li>
|
||||
8
templates/actions/objects/compound_structure.html
Normal file
8
templates/actions/objects/compound_structure.html
Normal file
@ -0,0 +1,8 @@
|
||||
<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>
|
||||
0
templates/actions/objects/group.html
Normal file
0
templates/actions/objects/group.html
Normal file
12
templates/actions/objects/package.html
Normal file
12
templates/actions/objects/package.html
Normal file
@ -0,0 +1,12 @@
|
||||
<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 class="button" data-toggle="modal" data-target="#delete_package_modal">
|
||||
<i class="glyphicon glyphicon-trash"></i> Delete Package</a>
|
||||
</li>
|
||||
8
templates/actions/objects/pathway.html
Normal file
8
templates/actions/objects/pathway.html
Normal file
@ -0,0 +1,8 @@
|
||||
<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>
|
||||
8
templates/actions/objects/reaction.html
Normal file
8
templates/actions/objects/reaction.html
Normal file
@ -0,0 +1,8 @@
|
||||
<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>
|
||||
4
templates/actions/objects/rule.html
Normal file
4
templates/actions/objects/rule.html
Normal file
@ -0,0 +1,4 @@
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" data-target="#edit_rule_modal">
|
||||
<i class="glyphicon glyphicon-edit"></i> Edit Rule</a>
|
||||
</li>
|
||||
20
templates/actions/objects/user.html
Normal file
20
templates/actions/objects/user.html
Normal file
@ -0,0 +1,20 @@
|
||||
<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>
|
||||
46
templates/admin.html
Normal file
46
templates/admin.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div id=searchContent>
|
||||
<form id="admin-form" action="{{ SERVER_BASE }}/admin" method="post">
|
||||
<div class="form-group">
|
||||
<label for="textarea">Query</label>
|
||||
<textarea id="textarea" class="form-control" rows="10" placeholder="Paste query here" required>
|
||||
PREFIX pps: <http://localhost:8080/vocabulary#>
|
||||
SELECT ?name (count(?objId) as ?xcnt)
|
||||
WHERE {
|
||||
?packageId pps:objectId 'package' .
|
||||
?packageId pps:name ?name .
|
||||
?packageId pps:reviewStatus 'reviewed' .
|
||||
?packageId pps:pathway ?objId .
|
||||
} GROUP BY ?name
|
||||
</textarea>
|
||||
</div>
|
||||
<button id="submit" type="button" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
<p></p>
|
||||
</div>
|
||||
<div id="results">
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#submit').on('click', function() {
|
||||
|
||||
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
|
||||
|
||||
data = {
|
||||
"query": $("#textarea").val()
|
||||
}
|
||||
|
||||
$.post("{{ SERVER_BASE }}/expire", data, function(result) {
|
||||
$("#loading").empty();
|
||||
queryResultToTable("results", result);
|
||||
})
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
279
templates/collections/objects_list.html
Normal file
279
templates/collections/objects_list.html
Normal file
@ -0,0 +1,279 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
{% if reviewed_objects.count > 50 or unreviewed_objects.count > 50 %}
|
||||
{% if object_type != 'package' %}
|
||||
<div id="load-remaining-button-div">
|
||||
<button class="btn btn-secondary btn-lg btn-block" type="button" id="load-remaining">Load all {{ reviewed_objects.count }} {{ object_type }}s
|
||||
</button>
|
||||
<p></p>
|
||||
<div id="load-all-loading"></div>
|
||||
<p></p>
|
||||
<div id="load-all-error" style="display: none;">
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||
<span class="sr-only">Error:</span>
|
||||
Getting objects failed!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="text" id="object-search" class="form-control" placeholder="Search by name" style="display: none;">
|
||||
<p></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% if object_type == 'package' %}
|
||||
{% include "modals/collections/new_package_modal.html" %}
|
||||
{% elif object_type == 'compound' %}
|
||||
{% include "modals/collections/new_compound_modal.html" %}
|
||||
{% elif object_type == 'rule' %}
|
||||
{% include "modals/collections/new_rule_modal.html" %}
|
||||
{% elif object_type == 'reaction' %}
|
||||
{% include "modals/collections/new_reaction_modal.html" %}
|
||||
{% elif object_type == 'pathway' %}
|
||||
{# {% include "modals/collections/new_pathway_modal.html" %} #}
|
||||
{% elif object_type == 'scenario' %}
|
||||
{% include "modals/collections/new_scenario_modal.html" %}
|
||||
{% elif object_type == 'model' %}
|
||||
{% include "modals/collections/new_model_modal.html" %}
|
||||
{% elif object_type == 'setting' %}
|
||||
{% include "modals/collections/new_setting_modal.html" %}
|
||||
{% elif object_type == 'user' %}
|
||||
<div></div>
|
||||
{% elif object_type == 'group' %}
|
||||
{% include "modals/collections/new_group_modal.html" %}
|
||||
{% endif %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="reviewListAccordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{% if object_type == 'package' %}
|
||||
Packages
|
||||
{% elif object_type == 'compound' %}
|
||||
Compounds
|
||||
{% elif object_type == 'structure' %}
|
||||
Compound structures
|
||||
{% elif object_type == 'rule' %}
|
||||
Rules
|
||||
{% elif object_type == 'reaction' %}
|
||||
Reactions
|
||||
{% elif object_type == 'pathway' %}
|
||||
Pathways
|
||||
{% elif object_type == 'scenario' %}
|
||||
Scenarios
|
||||
{% elif object_type == 'model' %}
|
||||
Model
|
||||
{% elif object_type == 'setting' %}
|
||||
Settings
|
||||
{% elif object_type == 'user' %}
|
||||
Users
|
||||
{% elif object_type == 'group' %}
|
||||
Groups
|
||||
{% endif %}
|
||||
<div id="actionsButton"
|
||||
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
|
||||
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 %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<!-- Set Text above links -->
|
||||
{% if object_type == 'package' %}
|
||||
<p>A package contains pathways, rules, etc. and can reflect specific experimental
|
||||
conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
|
||||
more >></a></p>
|
||||
{% elif object_type == 'compound' %}
|
||||
<p>A compound stores the structure of a molecule and can include meta-information.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
|
||||
>></a></p>
|
||||
{% elif object_type == 'structure' %}
|
||||
<p>The structures stored in this compound
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
|
||||
>></a></p>
|
||||
{% elif object_type == 'rule' %}
|
||||
<p>A rule describes a biotransformation reaction template that is defined as SMIRKS.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/Rules" role="button">Learn more
|
||||
>></a></p>
|
||||
{% elif object_type == 'reaction' %}
|
||||
<p>A reaction is a specific biotransformation from educt compounds to product compounds.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/reactions" role="button">Learn more
|
||||
>></a></p>
|
||||
{% elif object_type == 'pathway' %}
|
||||
<p>A pathway displays the (predicted) biodegradation of a compound as graph.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/pathways" role="button">Learn more
|
||||
>></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
|
||||
>></a></p>
|
||||
{% elif object_type == 'model' %}
|
||||
<p>A model applies machine learning to limit the combinatorial explosion.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/relative_reasoning" role="button">Learn
|
||||
more
|
||||
>></a></p>
|
||||
{% elif object_type == 'setting' %}
|
||||
<p>A setting includes configuration parameters for pathway predictions.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/settings" role="button">Learn more
|
||||
>></a></p>
|
||||
{% elif object_type == 'user' %}
|
||||
<p>Register now to create own packages and to submit and manage your data.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/users" role="button">Learn more
|
||||
>></a></p>
|
||||
{% elif object_type == 'group' %}
|
||||
<p>Users can team up in groups to share packages.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/groups" role="button">Learn more
|
||||
>></a></p>
|
||||
{% endif %}
|
||||
|
||||
<!-- If theres nothing to show extend the text above -->
|
||||
{% if reviewed_objects and unreviewed_objects %}
|
||||
{% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
|
||||
<p>Nothing found. There are two possible reasons: <br><br>1. There is no content yet.<br>2. You have no
|
||||
reading permissions.<br><br>Please be sure you have at least reading permissions.</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if reviewed_objects %}
|
||||
{% if reviewed_objects|length > 0 %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="ReviewedLink" data-toggle="collapse" data-parent="#reviewListAccordion"
|
||||
href="#Reviewed">Reviewed</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="Reviewed" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item" id="ReviewedContent">
|
||||
{% if object_type == 'package' %}
|
||||
{% for obj in reviewed_objects %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}
|
||||
<span class="glyphicon glyphicon-star" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for obj in reviewed_objects|slice:":50" %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}
|
||||
<span class="glyphicon glyphicon-star" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if unreviewed_objects %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver"><h4
|
||||
class="panel-title"><a id="UnreviewedLink" data-toggle="collapse" data-parent="#unReviewListAccordion"
|
||||
href="#Unreviewed">Unreviewed</a></h4></div>
|
||||
<div id="Unreviewed" class="panel-collapse collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %}">
|
||||
<div class="panel-body list-group-item" id="UnreviewedContent">
|
||||
{% if object_type == 'package' %}
|
||||
{% for obj in unreviewed_objects %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for obj in unreviewed_objects|slice:":50" %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if objects %}
|
||||
<!-- Unreviewable objects such as User / Group / Setting -->
|
||||
<ul class='list-group'>
|
||||
{% for obj in objects %}
|
||||
{% if object_type == 'user' %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
|
||||
{% else %}
|
||||
<a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#modal-form-delete-submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#modal-form-delete').submit();
|
||||
});
|
||||
|
||||
$('#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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('#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 %}
|
||||
15
templates/errors/400_bad_request.html
Normal file
15
templates/errors/400_bad_request.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div class="alert alert-error" role="alert">
|
||||
<h4 class="alert-heading">Bad Request!</h4>
|
||||
<p>Lorem</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
You can find out more about permissions in our <a target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/packages"
|
||||
role="button">Wiki >></a></p>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
15
templates/errors/403_access_denied.html
Normal file
15
templates/errors/403_access_denied.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div class="alert alert-error" role="alert">
|
||||
<h4 class="alert-heading">Access Denied!</h4>
|
||||
<p>Access to X denied. </p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
You can find out more about permissions in our <a target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/packages"
|
||||
role="button">Wiki >></a></p>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
15
templates/errors/404_not_found.html
Normal file
15
templates/errors/404_not_found.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div class="alert alert-error" role="alert">
|
||||
<h4 class="alert-heading">Not Found!</h4>
|
||||
<p>Does not exist</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
You can find out more about permissions in our <a target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/packages"
|
||||
role="button">Wiki >></a></p>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
224
templates/framework.html
Normal file
224
templates/framework.html
Normal file
@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% load static %}
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
|
||||
{# TODO use bundles from bootstrap 3.3.7 #}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
|
||||
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet"
|
||||
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 -->
|
||||
|
||||
{# 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"/>-->
|
||||
|
||||
|
||||
{# General EP JS #}
|
||||
<script src="{% static 'js/pps.js' %}"></script>
|
||||
{# Modal Steps for Stepwise Modal Wizards #}
|
||||
<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 -->
|
||||
{% endif %}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default navbar-inverse" style="border-radius:0px;" role="navigation">
|
||||
<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>-->
|
||||
<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">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse collapse-framework navbar-collapse-framework" id="navbarCollapse">
|
||||
<ul class="nav navbar-nav navbar-nav-framework">
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Predict Pathway<b class="caret"></b></a>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#predict_modal">
|
||||
<i class=" glyphicon glyphicon-tag"></i> Predict Pathway
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-toggle="modal" data-target="#batch_predict_modal">
|
||||
<i class=" glyphicon glyphicon-tags"></i> Batch Prediction
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li>
|
||||
<li><a href="{{ meta.server_url }}/search" id="searchLink">Search</a></li>
|
||||
<li><a href="{{ meta.server_url }}/model" id="modelLink">Modelling</a></li>
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Browse Data<b class="caret"></b></a>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
<li><a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a></li>
|
||||
<li><a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a></li>
|
||||
<li><a href="{{ meta.server_url }}/compound" id="compoundLink">Compound</a></li>
|
||||
<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>-->
|
||||
</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 class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Info <b class="caret"></b></a>
|
||||
<ul role="menu" class="dropdown-menu">
|
||||
<!--<li><a href="{{ meta.server_url }}/funding" id="fundingLink">Funding</a></li>-->
|
||||
<li><a href="https://envipath.com/license/" id="licenceLink">Licences</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a target="_blank" href="https://wiki.envipath.org/" id="wikiLink">Documentation Wiki</a>
|
||||
</li>
|
||||
<li><a href="#" id="citeButton" data-toggle="modal" data-target="#citemodal">How to cite
|
||||
enviPath</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a>Version: {{ meta.version }}</a></li>
|
||||
</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>
|
||||
{% 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">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Logout</button>
|
||||
</form>
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if message %}
|
||||
<div id="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="container text-center">
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ul class="nav nav-pills nav-justified">
|
||||
<li><a href="http://eawag.ch" target="_blank">
|
||||
<img id="image-ealogo"
|
||||
height="60"
|
||||
src='{% static "/images/ealogo.gif" %}'
|
||||
alt="Eawag"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://ml.auckland.ac.nz" target="_blank">
|
||||
<img id="image-uoalogo"
|
||||
height="60"
|
||||
src='{% static "/images/uoa.png" %}'
|
||||
alt="The Univserity of Auckland"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block modals %}
|
||||
{% include "modals/cite_modal.html" %}
|
||||
{% include "modals/signup_modal.html" %}
|
||||
{% include "modals/predict_modal.html" %}
|
||||
{% include "modals/batch_predict_modal.html" %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
140
templates/index/index.html
Normal file
140
templates/index/index.html
Normal file
@ -0,0 +1,140 @@
|
||||
{% extends "framework.html" %}
|
||||
{% 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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<div id="loading"></div>
|
||||
<script language="javascript">
|
||||
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
var action = $('#action-button').text().trim();
|
||||
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
|
||||
if (action != 'Search' && ketcherSmiles != '' && textSmiles != ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
}
|
||||
|
||||
if (action == 'Search') {
|
||||
console.log("Searching...");
|
||||
} else {
|
||||
console.log("Predicting");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
$(function() {
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
|
||||
// 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>
|
||||
{% endblock content %}
|
||||
14
templates/login/email_login.html
Normal file
14
templates/login/email_login.html
Normal file
@ -0,0 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<p>You are already logged in as {{ request.user.email }}.</p>
|
||||
{% endif %}
|
||||
<form action="{{ request.path }}" method="POST">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
{{ form }}
|
||||
<input type="submit" value="Send log in link">
|
||||
</p>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
5
templates/login/email_login_success.html
Normal file
5
templates/login/email_login_success.html
Normal file
@ -0,0 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<p>We sent a log in link. Check your email.</p>
|
||||
{% endblock content %}
|
||||
44
templates/migration.html
Normal file
44
templates/migration.html
Normal file
@ -0,0 +1,44 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="panel-group" id="migration-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
Migration Status BT Rules
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>Rules with Error: {{ error }}/{{ total }} </p>
|
||||
<p>Rules without Error: {{ success }}/{{ total }}</p>
|
||||
</div>
|
||||
|
||||
{% for obj in results %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
{% if obj.status %}
|
||||
<span class="glyphicon glyphicon-ok" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="glyphicon glyphicon-remove" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
</span>
|
||||
{% endif %}
|
||||
<h4 class="panel-title">
|
||||
<a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
|
||||
href="#{{ obj.id }}">{{ obj.name }}</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
|
||||
<div class="panel-body list-group-item">
|
||||
<a class="list-group-item" href="{{ obj.detail_url }}">{{ obj.name }} Migration Detail Page</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
{% endblock content %}
|
||||
50
templates/migration_detail.html
Normal file
50
templates/migration_detail.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="panel-group" id="migration-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
Migration Status for {{ bt_rule_name }}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>A package contains pathways, rules, etc. and can reflect specific experimental
|
||||
conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
|
||||
more >></a></p>
|
||||
</div>
|
||||
|
||||
{% for obj in results %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
{% if obj.status %}
|
||||
<span class="glyphicon glyphicon-ok" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="glyphicon glyphicon-remove" aria-hidden="true"
|
||||
style="float:right" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Reviewed">
|
||||
</span>
|
||||
{% endif %}
|
||||
<h4 class="panel-title">
|
||||
<a id="{{ obj.id }}-link" data-toggle="collapse" data-parent="#migration-detail"
|
||||
href="#{{ obj.id }}">{{ obj.name }}</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="{{ obj.id }}" class="panel-collapse collapse {% if not obj.status %}in{% endif %}">
|
||||
<div class="panel-body list-group-item">
|
||||
{% if obj.status %}
|
||||
<p>Products generated by AMBIT: {{ obj.ambit_smiles }}</p>
|
||||
<p>Products generated by RDKit: {{ obj.rdkit_smiles }}</p>
|
||||
{% else %}
|
||||
<pre>{{ obj.detail }}</pre>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
{% endblock content %}
|
||||
0
templates/modals/batch_predict_modal.html
Normal file
0
templates/modals/batch_predict_modal.html
Normal file
19
templates/modals/cite_modal.html
Normal file
19
templates/modals/cite_modal.html
Normal file
@ -0,0 +1,19 @@
|
||||
<div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4>How to cite enviPath</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
enviPath–The environmental contaminant biotransformation pathway resource. J Wicker, T Lorsbach, M
|
||||
Gütlein, E Schmid, D Latino, S Kramer, K Fenner. Nucleic Acids Research, gkv1229
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
50
templates/modals/collections/new_compound_modal.html
Normal file
50
templates/modals/collections/new_compound_modal.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="new_compound_modal" tabindex="-1" aria-labelledby="new_compound_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-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">Create a new Compound</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_compound_modal_form" accept-charset="UTF-8" action="{% url 'package compound list' meta.current_package.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="compound-name">Name</label>
|
||||
<input id="compound-name" class="form-control" name="compound-name" placeholder="Name"/>
|
||||
<label for="compound-description">Description</label>
|
||||
<input id="compound-description" class="form-control" name="compound-description" placeholder="Description"/>
|
||||
<p></p>
|
||||
<div>
|
||||
<iframe id="new_compound_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="compound-smiles" id="compound-smiles">
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="new_compound_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_compound_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
k = getKetcher('new_compound_ketcher');
|
||||
$('#compound-smiles').val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$('#new_compound_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
45
templates/modals/collections/new_group_modal.html
Normal file
45
templates/modals/collections/new_group_modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">New Group</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create new Group. You can assign users to the group once
|
||||
it is created. Description can be changed after creation.</p>
|
||||
<form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group"
|
||||
data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" type="text" class="form-control" placeholder="Description..."
|
||||
name="group-description"/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_group_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_group_modal_form_submit').on('click', function() {
|
||||
$('#new_group_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
201
templates/modals/collections/new_model_modal.html
Normal file
201
templates/modals/collections/new_model_modal.html
Normal file
@ -0,0 +1,201 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">New Model</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
|
||||
data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="jumbotron">Create a new Model to
|
||||
limit the number of degradation products in the
|
||||
prediction. You just need to set a name and the packages
|
||||
you want the object to be based on. If you want to use the
|
||||
default options suggested by us, simply click Submit,
|
||||
otherwise click Advanced Options.
|
||||
</div>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="model-name" class="form-control" placeholder="Name"/>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" name="model-description" class="form-control"
|
||||
placeholder="Description"/>
|
||||
<label for="model-type">Model Type</label>
|
||||
<select id="model-type" name="model-type" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select Model Type</option>
|
||||
{% for k, v in model_types.items %}
|
||||
<option value="{{ v }}">{{ k }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<!-- ML Based Form-->
|
||||
<div id="ml-relative-reasoning-specific-form">
|
||||
<!-- Rule Packages -->
|
||||
<label>Rule Packages</label><br>
|
||||
<select id="ml-relative-reasoning-rule-packages" name="ml-relative-reasoning-rule-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<!-- Data Packages -->
|
||||
<label>Data Packages</label><br>
|
||||
<select id="ml-relative-reasoning-data-packages" name="ml-relative-reasoning-data-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<!-- Fingerprinter -->
|
||||
<label for="ml-relative-reasoning-fingerprinter">Fingerprinter</label>
|
||||
<select id="ml-relative-reasoning-fingerprinter" name="ml-relative-reasoning-fingerprinter"
|
||||
class="form-control">
|
||||
<option value="MACCS" selected>MACCS Fingerprinter</option>
|
||||
</select>
|
||||
{% if 'plugins' in meta.enabled_features %}
|
||||
<!-- Property Plugins go here -->
|
||||
<label for="ml-relative-reasoning-additional-fingerprinter">Fingerprinter</label>
|
||||
<select id="ml-relative-reasoning-additional-fingerprinter"
|
||||
name="ml-relative-reasoning-additional-fingerprinter"
|
||||
class="form-control">
|
||||
</select>
|
||||
{% endif %}
|
||||
<label for="ml-relative-reasoning-threshold">Threshold</label>
|
||||
<input type="number" min="0" , max="1" step="0.05" value="0.5"
|
||||
id="ml-relative-reasoning-threshold"
|
||||
name="ml-relative-reasoning-threshold" class="form-control">
|
||||
|
||||
<!-- Evaluation -->
|
||||
|
||||
<label>Evaluation Packages</label><br>
|
||||
<select id="ml-relative-reasoning-evaluation-packages" name="ml-relative-reasoning-evaluation-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!-- Rule Based Based Form-->
|
||||
<div id="rule-based-relative-reasoning-specific-form">
|
||||
|
||||
</div>
|
||||
<!-- EnviFormer-->
|
||||
<div id="enviformer-specific-form">
|
||||
<label for="enviformer-threshold">Threshold</label>
|
||||
<input type="number" min="0" , max="1" step="0.05" value="0.5" id="enviformer-threshold"
|
||||
name="enviformer-threshold" class="form-control">
|
||||
</div>
|
||||
|
||||
{% if 'applicability_domain' in enabled_features %}
|
||||
<div class="modal-body hide" data-step="3" data-title="Advanced Options II">
|
||||
<div class="jumbotron">Selection of parameter values for the Applicability Domain process.
|
||||
Number of Neighbours refers to a requirement on the minimum number of compounds from the
|
||||
training
|
||||
dataset that has at least one triggered transformation rule that is common with the compound
|
||||
being
|
||||
analyzed.
|
||||
Reliability Threshold is a requirement on the average tanimoto distance to the set number of
|
||||
"nearest neighbours" (Number of neighbours with the smallest tanimoto distances).
|
||||
Local Compatibility Threshold is a requirement on the average F1 score determined from the
|
||||
number of
|
||||
nearest neighbours, using their respective precision and recall values computed from the
|
||||
agreement
|
||||
between their observed and triggered rules.
|
||||
You can learn more about it in our wiki!
|
||||
</div>
|
||||
<!-- Use AD? -->
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="buildAD" name="buildAD">Also build an Applicability Domain?
|
||||
</label>
|
||||
</div>
|
||||
<!-- Num Neighbours -->
|
||||
<label for="adK">Number of Neighbours</label>
|
||||
<input id="adK" name="adK" type="number" class="form-control" value="5" step="1" min="0"
|
||||
max="10">
|
||||
<!-- F1 Threshold -->
|
||||
<label for="localCompatibilityThreshold">Local Compatibility Threshold</label>
|
||||
<input id="localCompatibilityThreshold" name="localCompatibilityThreshold" type="number"
|
||||
class="form-control" value="0.5" step="0.01" min="0" max="1">
|
||||
<!-- Percentile Threshold -->
|
||||
<label for="reliabilityThreshold">Reliability Threshold</label>
|
||||
<input id="reliabilityThreshold" name="reliabilityThreshold" type="number" class="form-control"
|
||||
value="0.5" step="0.01" min="0" max="1">
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_model_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$("#ml-relative-reasoning-rule-packages").selectpicker();
|
||||
$("#ml-relative-reasoning-data-packages").selectpicker();
|
||||
$("#ml-relative-reasoning-evaluation-packages").selectpicker();
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#model-type").change(function() {
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $('option:selected', this).val();
|
||||
$("#" + val + "-specific-form").show();
|
||||
});
|
||||
|
||||
$('#new_model_modal_form_submit').on('click', function(e){
|
||||
e.preventDefault();
|
||||
$('#new_model_form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
62
templates/modals/collections/new_package_modal.html
Normal file
62
templates/modals/collections/new_package_modal.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="modal fade"
|
||||
tabindex="-1"
|
||||
id="new_package_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="new_package_modal"
|
||||
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">New Package</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create new package. Description can be changed later.</p>
|
||||
<form id="new_package_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control"
|
||||
name="package-name"
|
||||
placeholder="Name"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="description">Description</label>
|
||||
<input id="description"
|
||||
type="text"
|
||||
rows="3"
|
||||
class="form-control"
|
||||
placeholder="Description..."
|
||||
name="package-description"/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_package_modal_form_submit"
|
||||
class="btn btn-primary"
|
||||
href="#">Submit</a>
|
||||
<button type="button"
|
||||
class="btn btn-default"
|
||||
data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_package_modal_form_submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#new_package_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
301
templates/modals/collections/new_pathway_modal.html
Normal file
301
templates/modals/collections/new_pathway_modal.html
Normal file
@ -0,0 +1,301 @@
|
||||
{% load static %}
|
||||
<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
|
||||
aria-hidden="true" style="overflow-y: auto;">
|
||||
<!-- FIXME: make width dynamic-->
|
||||
<div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="js-title-step"></h4>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="1" data-title="New Pathway">
|
||||
<div class="jumbotron">Create a new pathway by entering
|
||||
the root compound and a name. Then select if you want to
|
||||
use the prediction engine to generate a predicted pathway or
|
||||
create an empty pathway that you fill in by yourself. If
|
||||
you choose to predict a pathway, you can modify the
|
||||
settings for the prediction, or use the default settings
|
||||
and just click Submit.
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{% if current_user.name == 'anonymous' %}
|
||||
<div class="alert alert-warning">
|
||||
You are currently logged in as Anonymous. Please note:
|
||||
Pathways entered or predicted as anonymous user will be deleted after 30 days.
|
||||
Please log in to save your results.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control" name="name" placeholder="Name"/>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" class="form-control" name="description" placeholder="no description"/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="predict">Predict pathway or build yourself?</label>
|
||||
<div class="radio" id="predict">
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict pathway
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioIncremental"value="incremental"/>Incremental prediction
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="smilesinput">SMILES</label>
|
||||
<table style="width: 100%">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 90%;">
|
||||
<col span="1" style="width: 10%;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="smilesinput" class="form-control" name="smilesinput" placeholder="C1CCCCC1"
|
||||
autocapitalize="none"/>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default" id="render-button">
|
||||
Render
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p id="ketcher_container"></p>
|
||||
<div>
|
||||
<iframe id="ifKetcher" src="{% static '/js/ketcher/ketcher.html' %}" width="850"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="2" data-title="New Pathway - Advanced Settings">
|
||||
<div class="jumbotron">Choose if you want to use an existing
|
||||
setting, or create a new one for this pathway
|
||||
prediction. Then click Submit to use the specified setting,
|
||||
or click next to set the parameters.
|
||||
</div>
|
||||
<div id="settings">
|
||||
<div class="radio" id="settingRadio">
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="existing" id="radioDefault" value="exisiting" checked/>
|
||||
Use Default
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="existing" id="radioExists" value="exisiting"/>
|
||||
Select Existing
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="existing" id="radioNew" value="temporary"/>
|
||||
Create New
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<select id="settingSelect" name="settingSelect" class="form-control">
|
||||
{% for setting in available_settings %}
|
||||
<option value="{{ setting.id }}">{{ setting.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
{% with step_offset=1 %}
|
||||
{% include "templates/modals/collections/new_setting_modal_body.html" %}
|
||||
{% endwith %}
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel"
|
||||
onclick="reset()" data-dismiss="modal"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="previous"
|
||||
id="backbutton"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="next"
|
||||
id="nextbutton"></button>
|
||||
<a id="modal-form-submit" class="btn btn-primary" href="#">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
s = new Setting(
|
||||
'settingName',
|
||||
'package_multi_select',
|
||||
'modelSelect',
|
||||
'cutoff',
|
||||
'evalType',
|
||||
'availableTS',
|
||||
'forms',
|
||||
'truncatorTable',
|
||||
'summaryTable',
|
||||
);
|
||||
|
||||
$(function() {
|
||||
// hide all forms
|
||||
$('#forms').children().hide()
|
||||
|
||||
$("#render-button").on("click", function() {
|
||||
syncKetcherAndTextInput('text', "ifKetcher", "smilesinput");
|
||||
});
|
||||
|
||||
// If theres a change in the in '#smilesinput' sync the value to ketcher
|
||||
$('#smilesinput').on('input', function() {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
});
|
||||
|
||||
// If theres an update in ketcher sync it to textinput
|
||||
setInterval(function() {
|
||||
syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
|
||||
}, 250);
|
||||
|
||||
$("#smilesinput").on("blur", function() {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
});
|
||||
|
||||
$("#smilesinput").on("keypress", function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
}
|
||||
});
|
||||
|
||||
// Show forms depending on the selected TS
|
||||
$('#availableTS').on('change', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var type = $(this).val();
|
||||
// hide current content
|
||||
$('#forms').children().hide()
|
||||
|
||||
if(type === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#' + type + '_form').show()
|
||||
});
|
||||
|
||||
$("#modelSelect").on("change", function() {
|
||||
setCutoff = function (thresh) {
|
||||
$("#cutoff").val(thresh);
|
||||
}
|
||||
|
||||
var modelUri = $("#modelSelect :selected").val();
|
||||
fillPRCurve(modelUri, setCutoff);
|
||||
});
|
||||
|
||||
// Add a TS to the setting
|
||||
$('#add-ts-button').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
s.addTruncator();
|
||||
});
|
||||
|
||||
$('input[type=radio][name=predict]').change(function() {
|
||||
if (this.id == 'radioBuild') {
|
||||
$("#nextbutton").prop("disabled", true);
|
||||
} else {
|
||||
$("#nextbutton").prop("disabled", false);
|
||||
}
|
||||
});
|
||||
|
||||
$('input[type=radio][name=existing]').change(function() {
|
||||
if (this.id == 'radioDefault' || this.id == 'radioExists') {
|
||||
if(this.id == 'radioDefault') {
|
||||
$("#settingSelect").prop("disabled", true);
|
||||
} else {
|
||||
$("#settingSelect").prop("disabled", false);
|
||||
}
|
||||
$("#nextbutton").prop("disabled", true);
|
||||
} else {
|
||||
// build...
|
||||
$("#settingSelect").prop("disabled", true);
|
||||
$("#nextbutton").prop("disabled", false);
|
||||
}
|
||||
});
|
||||
|
||||
var pwStep1 = function() {
|
||||
console.log("pw step 1");
|
||||
// Make "Next" to "Advanced"
|
||||
$('#nextbutton').val("Advanced");
|
||||
}
|
||||
|
||||
var pwStep2 = function() {
|
||||
console.log("pw step 2");
|
||||
// Make "Advanced" to "Next"
|
||||
$('#nextbutton').val("Next");
|
||||
// As "Use default is preselected" disable "Next" button
|
||||
$("#nextbutton").prop("disabled",true);
|
||||
// Disable setting dropdown as long as the correspndonding radio isnt checked
|
||||
$("#settingSelect").prop("disabled",true);
|
||||
// Show submit button
|
||||
$("#modal-form-submit").show();
|
||||
}
|
||||
|
||||
var settingStep1 = function (){
|
||||
// First step sets name and packages
|
||||
s.extractName();
|
||||
s.extractSelectedPackages();
|
||||
}
|
||||
|
||||
var settingStep2 = function (){
|
||||
// Seconds step gathers relative reasoning params
|
||||
s.extractRelativeReasoning();
|
||||
s.extractCutoff();
|
||||
s.extractEvaluationType();
|
||||
}
|
||||
|
||||
var settingStep3 = function() {
|
||||
s.updateTable();
|
||||
s.updateSummaryTable();
|
||||
// hide duplicate submit...
|
||||
$("#nextbutton").hide();
|
||||
}
|
||||
|
||||
var postPathway = function(){
|
||||
console.log("Complete!");
|
||||
console.log(s.tsParams);
|
||||
console.log("Getting SMILES");
|
||||
}
|
||||
|
||||
function dummy() {
|
||||
console.log("dummy");
|
||||
}
|
||||
|
||||
$('#new_pathway_modal').modalSteps({
|
||||
btnCancelHtml: 'Cancel',
|
||||
btnPreviousHtml: 'Back',
|
||||
btnNextHtml: 'Next',
|
||||
btnLastStepHtml: 'Submit',
|
||||
disableNextButton: false,
|
||||
completeCallback: postPathway,
|
||||
callbacks: {
|
||||
'1': pwStep1,
|
||||
'2' : pwStep2,
|
||||
'3' : dummy,
|
||||
'4' : settingStep1,
|
||||
'5' : settingStep2,
|
||||
'6' : settingStep3,
|
||||
}
|
||||
});
|
||||
|
||||
$('#modal-form-submit').on('click', function() {
|
||||
e.preventDefault();
|
||||
postPathway();
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
108
templates/modals/collections/new_prediction_setting_modal.html
Normal file
108
templates/modals/collections/new_prediction_setting_modal.html
Normal file
@ -0,0 +1,108 @@
|
||||
{% load static %}
|
||||
|
||||
<div id="new_prediction_setting_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Prediction Setting</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>To create a Prediction Setting fill the form below and click "Create"</p>
|
||||
<form id="new-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<label for="prediction-setting-name">Name</label>
|
||||
<input id="prediction-setting-name" name="prediction-setting-name" class="form-control" placeholder="Name"/>
|
||||
<label for="prediction-setting-description">Description</label>
|
||||
<input id="prediction-setting-description" name="prediction-setting-description" class="form-control"
|
||||
placeholder="Description"/>
|
||||
|
||||
<label for="prediction-setting-max-nodes">Max #Nodes</label>
|
||||
<input id="prediction-setting-max-nodes" type="number" class="form-control" name="prediction-setting-max-nodes" value="30" min="1" max="50" step="1">
|
||||
<label for="prediction-setting-max-depth">Max Depth</label>
|
||||
<input id="prediction-setting-max-depth" type="number" class="form-control" name="prediction-setting-max-depth" value="5" min="1" max="8" step="1">
|
||||
|
||||
<label for="tp-generation-method">TP Generation Method</label>
|
||||
<select id="tp-generation-method" name="tp-generation-method" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select how TPs are generated</option>
|
||||
<option value="rule-based-prediction-setting">Rule Based</option>
|
||||
<option value="model-based-prediction-setting">Model Based</option>
|
||||
</select>
|
||||
<div id="rule-based-prediction-setting-specific-form">
|
||||
<!-- Rule Packages -->
|
||||
<label>Rule Packages</label><br>
|
||||
<select id="rule-based-prediction-setting-packages" name="rule-based-prediction-setting-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div id="model-based-prediction-setting-specific-form">
|
||||
<label>Select Model</label><br>
|
||||
<select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select the model</option>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.url }}">{{ m.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="model-based-prediction-setting-threshold">Threshold</label>
|
||||
<input id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="form-control" placeholder="0.25" type="number"/>
|
||||
</div>
|
||||
|
||||
<input class="form-check-input" type="checkbox" value="on" id="prediction-setting-new-default" name="prediction-setting-new-default">
|
||||
<label class="form-check-label" for="prediction-setting-new-default">Set this setting as new default</label>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="new-prediction-setting-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$("#rule-based-prediction-setting-packages").selectpicker();
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#tp-generation-method").change(function() {
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $('option:selected', this).val();
|
||||
$("#" + val + "-specific-form").show();
|
||||
});
|
||||
|
||||
$('#new-prediction-setting-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
// $('#new-prediction-setting-modal-form').submit();
|
||||
|
||||
const formData = $('#new-prediction-setting-modal-form').serialize();
|
||||
$.post('/setting', formData, function(response) {
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
})
|
||||
</script>
|
||||
50
templates/modals/collections/new_reaction_modal.html
Normal file
50
templates/modals/collections/new_reaction_modal.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="new_reaction_modal" tabindex="-1" aria-labelledby="new_reaction_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-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">Create a new Reaction</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_reaction_modal_form" accept-charset="UTF-8" action="{% url 'package reaction list' meta.current_package.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="reaction-name">Name</label>
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" placeholder="Name"/>
|
||||
<label for="reaction-description">Description</label>
|
||||
<input id="reaction-description" class="form-control" name="reaction-description" placeholder="Description"/>
|
||||
<p></p>
|
||||
<div>
|
||||
<iframe id="new_reaction_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="reaction-smirks" id="reaction-smirks">
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="new_reaction_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_reaction_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
k = getKetcher('new_reaction_ketcher');
|
||||
$('#reaction-smirks').val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$('#new_reaction_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
61
templates/modals/collections/new_rule_modal.html
Normal file
61
templates/modals/collections/new_rule_modal.html
Normal file
@ -0,0 +1,61 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="new_rule_modal" tabindex="-1" aria-labelledby="new_rule_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-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">Create a new Rule</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_rule_modal_form" accept-charset="UTF-8" action="{% url 'package rule list' meta.current_package.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="rule-name">Name</label>
|
||||
<input id="rule-name" class="form-control" name="rule-name" placeholder="Name"/>
|
||||
<label for="rule-description">Description</label>
|
||||
<input id="rule-description" class="form-control" name="rule-description" placeholder="Description"/>
|
||||
<p></p>
|
||||
<!-- TODO Ruletypes -->
|
||||
<!-- TODO Decide on rules to use?-->
|
||||
<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>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="new_rule_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#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();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
115
templates/modals/collections/new_scenario_modal.html
Normal file
115
templates/modals/collections/new_scenario_modal.html
Normal file
@ -0,0 +1,115 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="newScenGenMod"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span> <span
|
||||
class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="js-title-step"></h4>
|
||||
</div>
|
||||
<form id="base-scenario-form" accept-charset="UTF-8" action="" data-remote="true" method="POST">
|
||||
<div class="modal-body hide" data-step="1" data-title="New Scenario - Step 1">
|
||||
<div class="jumbotron">Please enter name, description,
|
||||
and date of scenario. Date should be associated to the
|
||||
data, not the current date. For example, this could
|
||||
reflect the publishing date of a study. You can leave
|
||||
all fields but the name empty and fill them in
|
||||
later.
|
||||
</div>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="studyname" placeholder="Name" class="form-control"/>
|
||||
<label for="name">Description</label>
|
||||
<input id="description" name="studydescription" placeholder="Description" class="form-control"/>
|
||||
<label id="dateField" for="dateYear">Date</label>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="number" id="dateYear" name="dateYear" class="form-control" placeholder="YYYY">
|
||||
</th>
|
||||
<th>
|
||||
<input type="number" id="dateMonth" name="dateMonth" min="1" max="12"
|
||||
class="form-control" placeholder="MM" align="">
|
||||
</th>
|
||||
<th>
|
||||
<input type="number" id="dateDay" name="dateDay" min="1" max="31" class="form-control"
|
||||
placeholder="DD">
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="2" data-title="New Scenario - Step 2">
|
||||
<div class="jumbotron">
|
||||
Do you want to create an empty scenario and fill it
|
||||
with your own set of attributes, or fill in a
|
||||
pre-defined set of attributes for soil, sludge or sediment
|
||||
data?
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioEmpty" checked>Empty Scenario
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSoil" value="soil" >Soil Data
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSludge" value="sludge">Sludge Data
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSediment" value="sediment">Water-Sediment System Data
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="3" data-title="New Scenario - Step 3">
|
||||
<div class="jumbotron" id="finaljumbo">
|
||||
All done! Click Submit!
|
||||
</div>
|
||||
<div style="float: left"><button
|
||||
id="addColumnButton" type="button"
|
||||
class="btn btn-default">Add
|
||||
another Scenario
|
||||
</button></div>
|
||||
<input type="hidden" name="fullScenario" value="true"/>
|
||||
{% include "tables/scenario.html" %}
|
||||
</div>
|
||||
</form>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="previous"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step"
|
||||
data-orientation="next" id="nextbutton"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p></p>
|
||||
<div id="scenariocontent"></div>
|
||||
|
||||
<!--Template index -->
|
||||
<script language="javascript">
|
||||
$(function() {
|
||||
|
||||
// Hide additional columns per default
|
||||
$('.col-2').hide();
|
||||
$('.col-3').hide();
|
||||
|
||||
//TODO just to see modal
|
||||
$('#new_scenario_modal').modalSteps({
|
||||
btnCancelHtml: 'Cancel',
|
||||
btnPreviousHtml: 'Previous',
|
||||
btnNextHtml: 'Next',
|
||||
btnLastStepHtml: 'Submit',
|
||||
disableNextButton: false,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
35
templates/modals/objects/delete_compound_modal.html
Normal file
35
templates/modals/objects/delete_compound_modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<!-- Delete Compound -->
|
||||
<div id="delete_compound_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Compound</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 Compound and associated Structures.
|
||||
<form id="delete-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-compound"/>
|
||||
</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-compound-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#delete-compound-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#delete-compound-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
36
templates/modals/objects/delete_package_modal.html
Normal file
36
templates/modals/objects/delete_package_modal.html
Normal file
@ -0,0 +1,36 @@
|
||||
{% load static %}
|
||||
<!-- Delete Package -->
|
||||
<div id="delete_package_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Package</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deleting a Package deletes the very Package
|
||||
as well as all Objects stored in the Package.
|
||||
<form id="delete-package-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-package"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="delete-package-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#delete-package-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#delete-package-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
38
templates/modals/objects/delete_user_modal.html
Normal file
38
templates/modals/objects/delete_user_modal.html
Normal file
@ -0,0 +1,38 @@
|
||||
{% load static %}
|
||||
<!-- Delete User -->
|
||||
<div id="delete_user_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete User</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-danger">
|
||||
Clicking "Delete" will <strong>permanently</strong> delete the User and associated data.
|
||||
This action can't be undone!
|
||||
</div>
|
||||
<form id="delete-user-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="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-danger" id="delete-user-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#delete-user-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#delete-user-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
46
templates/modals/objects/edit_compound_modal.html
Normal file
46
templates/modals/objects/edit_compound_modal.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Compound</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit a Compound.</p>
|
||||
<form id="edit-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-name">Name</label>
|
||||
<input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-description">Description</label>
|
||||
<input id="compound-description" type="text" class="form-control"
|
||||
value="{{ compound.description }}"
|
||||
name="compound-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-compound-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-compound-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-compound-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
45
templates/modals/objects/edit_compound_structure_modal.html
Normal file
45
templates/modals/objects/edit_compound_structure_modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_structure_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Compound</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit a Compound Structure.</p>
|
||||
<form id="edit-compound-structure-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-structure-name">Name</label>
|
||||
<input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ structure.name }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-structure-description">Description</label>
|
||||
<input id="compound-structure-description" type="text" class="form-control"
|
||||
value="{{ structure.description }}" name="compound-structure-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-compound-structure-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-compound-structure-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-compound-structure-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
0
templates/modals/objects/edit_group_modal.html
Normal file
0
templates/modals/objects/edit_group_modal.html
Normal file
44
templates/modals/objects/edit_package_modal.html
Normal file
44
templates/modals/objects/edit_package_modal.html
Normal file
@ -0,0 +1,44 @@
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="edit_package_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Package</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 Package.</p>
|
||||
<form id="edit-package-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="package-name">Name</label>
|
||||
<input id="package-name" class="form-control" name="package-name" value="{{ package.name}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="package-description">Description</label>
|
||||
<input id="package-description" type="text" class="form-control"
|
||||
value="{{ package.description }}"
|
||||
name="package-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-package-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-package-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
46
templates/modals/objects/edit_password_modal.html
Normal file
46
templates/modals/objects/edit_password_modal.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="edit_password_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update your Password</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>To change your password please fill out the following inputs</p>
|
||||
<form id="edit-password-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="old-password">Old Password</label>
|
||||
<input id="old-password" class="form-control" name="old-password" type="password" autocomplete="current-password">
|
||||
</p>
|
||||
<p>
|
||||
<label for="new-password">New Password</label>
|
||||
<input id="new-password" class="form-control" name="new-password" type="password", autocomplete="new-password">
|
||||
</p>
|
||||
<p>
|
||||
<label for="new-password-repeat">Repeat New Password</label>
|
||||
<input id="new-password-repeat" class="form-control" name="new-password-repeat" type="password" autocomplete="new-password">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-password-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-password-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-password-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
106
templates/modals/objects/edit_prediction_setting_modal.html
Normal file
106
templates/modals/objects/edit_prediction_setting_modal.html
Normal file
@ -0,0 +1,106 @@
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="update_prediction_settings_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update Prediction Setting</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>To update your prediction setting modify parameters in the form below und click "Update"</p>
|
||||
<form id="edit-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div id="prediction-setting" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
|
||||
<table class="table table-bordered table-hover">
|
||||
<tr style="background-color: rgba(0, 0, 0, 0.08);">
|
||||
<th scope="col" width="20%">Parameter</th>
|
||||
<th scope="col" width="80%">Value</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
{% if 'model' in user.prediction_settings %}
|
||||
<tr>
|
||||
<td width="20%">Model</td>
|
||||
<td width="80%">
|
||||
<table width="100%" class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<select id="model" name="model" class="form-control" data-width='100%'>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
{% for k, v in user.prediction_settings.model_parameters.items %}
|
||||
<tr>
|
||||
<th width="20%">Model Parameter</th>
|
||||
<th width="80%">Parameter Value</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="20%">
|
||||
{% if k == 'threshold' %}
|
||||
Threshold
|
||||
{% endif %}
|
||||
</td>
|
||||
<td width="80%">
|
||||
{% if k == 'threshold' %}
|
||||
<input type="number" class="form-control" name="{{k}}" value="{{v}}"
|
||||
min="0" max="1" step="0.05">
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% for k, v in user.prediction_settings.truncator.items %}
|
||||
<tr>
|
||||
<td><p>
|
||||
{% if k == 'max_nodes' %}
|
||||
Max Nodes
|
||||
{% elif k == 'max_depth' %}
|
||||
Max Depth
|
||||
{% endif %}
|
||||
</p></td>
|
||||
<td><p>
|
||||
{% if k == 'max_nodes' %}
|
||||
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
|
||||
max="50" step="1">
|
||||
{% elif k == 'max_depth' %}
|
||||
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
|
||||
max="8" step="1">
|
||||
{% endif %}
|
||||
</p></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-prediction-setting-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-prediction-setting-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-prediction-setting-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
45
templates/modals/objects/edit_reaction_modal.html
Normal file
45
templates/modals/objects/edit_reaction_modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
{% load static %}
|
||||
<!-- Edit Reaction -->
|
||||
<div id="edit_reaction_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<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>
|
||||
<label for="reaction-name">Name</label>
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="reaction-description">Description</label>
|
||||
<input id="reaction-description" type="text" class="form-control"
|
||||
value="{{ reaction.description }}" name="reaction-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-reaction-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-reaction-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-reaction-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
0
templates/modals/objects/edit_rule_modal.html
Normal file
0
templates/modals/objects/edit_rule_modal.html
Normal file
61
templates/modals/objects/edit_user_modal.html
Normal file
61
templates/modals/objects/edit_user_modal.html
Normal file
@ -0,0 +1,61 @@
|
||||
{% load static %}
|
||||
<!-- Edit User -->
|
||||
<div id="edit_user_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update User Defaults</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit User Defaults.</p>
|
||||
<form id="edit-user-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="default-package">Default Package</label>
|
||||
<select id="default-package" name="default-package" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Package</option>
|
||||
{% for p in meta.writeable_packages %}
|
||||
<option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="default-group">Default Group</label>
|
||||
<select id="default-group" name="default-group" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Group</option>
|
||||
{% for g in meta.available_groups %}
|
||||
<option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="default-prediction-setting">Default Prediction Setting</label>
|
||||
<select id="default-prediction-setting" name="default-prediction-setting" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Setting</option>
|
||||
{% for s in meta.available_settings %}
|
||||
<option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-user-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-user-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-user-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
92
templates/modals/objects/manage_api_token_modal.html
Normal file
92
templates/modals/objects/manage_api_token_modal.html
Normal file
@ -0,0 +1,92 @@
|
||||
<div class="modal fade"
|
||||
tabindex="-1"
|
||||
id="manage_api_token_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="manage_api_token_modal"
|
||||
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>
|
||||
<h3 class="modal-title">Manage API Token</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Requesting a Token will invalidate all potential existing tokens. The new token will only be shown once, so ensure to store it in secure place</p>
|
||||
<form id="request_api_token_form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="token-name">Name</label>
|
||||
<input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
|
||||
<label for="valid-for">Valid for (in days)</label>
|
||||
<input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
|
||||
<input type="hidden" name="hidden" value="request-api-token">
|
||||
</p>
|
||||
</form>
|
||||
<div id="new-token">
|
||||
<pre id="new-token-pre"></pre>
|
||||
</div>
|
||||
<div id="existing-tokens">
|
||||
{% for t in tokens %}
|
||||
<form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="input-group">
|
||||
<input type="hidden" name="hidden" value="delete">
|
||||
<input type="hidden" name="token-id" value="{{ t.pk }}">
|
||||
<input type="text" class="form-control" value="{{ t.name }}" disabled>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="manage_api_token_form_submit"
|
||||
class="btn btn-primary"
|
||||
href="#">Submit</a>
|
||||
<button type="button"
|
||||
class="btn btn-default"
|
||||
data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new-token').hide()
|
||||
|
||||
$('#manage_api_token_form_submit').on('click', function (e) {
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
// Select all elements that start with 'delete-token-'
|
||||
$("[id^='delete-token-']").on("submit", function(e) {
|
||||
e.preventDefault();
|
||||
const formData = $(this).serialize();
|
||||
const form = $(this);
|
||||
$.post(this.action, formData, function(response) {
|
||||
console.log(this);
|
||||
form.remove();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
103
templates/modals/predict_modal.html
Normal file
103
templates/modals/predict_modal.html
Normal file
@ -0,0 +1,103 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="predict_modal" tabindex="-1" aria-labelledby="predict_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Predict a Pathway</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="predict_modal_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/pathway" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control" name="name" placeholder="Name"/>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" class="form-control" name="description" placeholder="Description"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="predict">Predict pathway or build yourself?</label>
|
||||
<div class="radio" id="predict">
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict
|
||||
pathway
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioIncremental" value="incremental"/>Incremental
|
||||
prediction
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="predict-modal-smiles">SMILES</label>
|
||||
<input type="text" class="form-control" name="smiles" placeholder="SMILES" id="predict-modal-smiles">
|
||||
<p id="ketcher_container"></p>
|
||||
<div>
|
||||
<iframe id="predict-modal-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="predictButton">Predict</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function predictModalketcherToPredictModalTextInput() {
|
||||
$('#predict-modal-smiles').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#predict-modal-ketcher').on('load', function() {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: predictModalketcherToPredictModalTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
})
|
||||
|
||||
$('#predictButton').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
// loading button
|
||||
|
||||
// validation
|
||||
|
||||
// existing pws...
|
||||
|
||||
// submit form
|
||||
$('#predict_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
110
templates/modals/signup_modal.html
Normal file
110
templates/modals/signup_modal.html
Normal file
@ -0,0 +1,110 @@
|
||||
<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>
|
||||
69
templates/objects/composite_rule.html
Normal file
69
templates/objects/composite_rule.html
Normal file
@ -0,0 +1,69 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% 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>
|
||||
|
||||
<!-- Reaction Patterns -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-reaction-patterns-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-reaction-patterns">Reaction Patterns</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-reaction-patterns" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for r in rule.srs %}
|
||||
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
|
||||
<div align="center">
|
||||
<p>
|
||||
{{r.as_svg|safe}}
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- EC Numbers -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
|
||||
href="#rule-ec-numbers">EC Numbers</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="rule-ec-numbers" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
97
templates/objects/compound.html
Normal file
97
templates/objects/compound.html
Normal file
@ -0,0 +1,97 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_compound_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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMILES -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="compound-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
|
||||
href="#compound-smiles">SMILES Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="compound-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ compound.default_structure.smiles }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMILES -->
|
||||
<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 -->
|
||||
|
||||
<!-- Pathways -->
|
||||
|
||||
<!-- External Identifiers -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock content %}
|
||||
64
templates/objects/compound_structure.html
Normal file
64
templates/objects/compound_structure.html
Normal file
@ -0,0 +1,64 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_compound_structure_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="compound-structure-detail">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
||||
{{ 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;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/compound_structure.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ compound_structure.description }} </p>
|
||||
</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_structure.as_svg|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SMILES -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="compound-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
|
||||
href="#compound-smiles">SMILES Representation</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="compound-smiles" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{{ compound_structure.smiles }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reactions -->
|
||||
|
||||
<!-- Pathways -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock content %}
|
||||
31
templates/objects/group.html
Normal file
31
templates/objects/group.html
Normal file
@ -0,0 +1,31 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_group_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="package-detail">
|
||||
<div class="panel panel-default">
|
||||
<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;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/group.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ group.description }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
263
templates/objects/model.html
Normal file
263
templates/objects/model.html
Normal file
@ -0,0 +1,263 @@
|
||||
{% extends "framework.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% 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">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
if(!($('#sg-chart').length > 0)) {
|
||||
return;
|
||||
}
|
||||
console.log($('#sg-chart').length)
|
||||
//$('#sg-curve-plotdiv').empty();
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
//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;
|
||||
}
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- End Single Gen Curve Panel -->
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function handleResponse(data) {
|
||||
res = "<table class='table table-striped'>"
|
||||
res += "<thead>"
|
||||
res += "<th scope='col'>#</th>"
|
||||
|
||||
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!"
|
||||
}
|
||||
|
||||
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 :/");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
53
templates/objects/package.html
Normal file
53
templates/objects/package.html
Normal file
@ -0,0 +1,53 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_package_modal.html" %}
|
||||
{% include "modals/objects/delete_package_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="package-detail">
|
||||
<div class="panel panel-default">
|
||||
<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;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/package.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> {{ package.description }} </p>
|
||||
</div>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<a href="{{ package.url }}/pathway">Pathways ({{ package.pathways.count }})</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="{{ package.url }}/rule">Rules ({{ package.rules.count }})</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="{{ package.url }}/compound">Compounds ({{ package.compounds.count }})</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="{{ package.url }}/reaction">Reactions ({{ package.reactions.count }})</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="{{ package.url }}/model">Models ({{ package.models.count }})</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="{{ package.url }}/scenario">Scenarios ({{ package.scenarios.count }})</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
113
templates/objects/pathway.html
Normal file
113
templates/objects/pathway.html
Normal file
@ -0,0 +1,113 @@
|
||||
{% 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>
|
||||
|
||||
<p></p>
|
||||
|
||||
<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">
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function transformReferences(text) {
|
||||
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
|
||||
}
|
||||
|
||||
pathway = {{ pathway.d3_json | safe }};
|
||||
|
||||
$(function() {
|
||||
draw(pathway, 'vizdiv');
|
||||
// TODO fix somewhere else...
|
||||
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
||||
$('#DescriptionContent').html(newDesc);
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock content %}
|
||||
32
templates/objects/reaction.html
Normal file
32
templates/objects/reaction.html
Normal file
@ -0,0 +1,32 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_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>
|
||||
<div class="panel-body">
|
||||
<p> {{ reaction.description }} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock content %}
|
||||
174
templates/objects/simple_rule.html
Normal file
174
templates/objects/simple_rule.html
Normal file
@ -0,0 +1,174 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% 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>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
158
templates/objects/user.html
Normal file
158
templates/objects/user.html
Normal file
@ -0,0 +1,158 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% block action_modals %}
|
||||
{% include "modals/objects/edit_user_modal.html" %}
|
||||
{% include "modals/objects/edit_password_modal.html" %}
|
||||
{% include "modals/collections/new_prediction_setting_modal.html" %}
|
||||
{% include "modals/objects/manage_api_token_modal.html" %}
|
||||
{% include "modals/objects/delete_user_modal.html" %}
|
||||
{% endblock action_modals %}
|
||||
|
||||
<div class="panel-group" id="user-detail">
|
||||
<div class="panel panel-default">
|
||||
<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;"
|
||||
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false"><span
|
||||
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
|
||||
style="padding-right:1em"></span></a>
|
||||
<ul id="actionsList" class="dropdown-menu">
|
||||
{% block actions %}
|
||||
{% include "actions/objects/user.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p> On this page you can modify your account or set preferences such as prediction settings.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Default Package -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="default-package-link" data-toggle="collapse" data-parent="#user-detail"
|
||||
href="#default-package">Default Package</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="default-package" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<li class="list-group-item">
|
||||
<a href="{{ user.default_package.url }}"> {{ user.default_package.name }}</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Groups -->
|
||||
{% if meta.available_groups|length > 0 %}
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="group-links" data-toggle="collapse" data-parent="#user-detail"
|
||||
href="#groups">Groups</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="groups" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for g in meta.available_groups %}
|
||||
<li class="list-group-item">
|
||||
<a href="{{ g.url }}"> {{ g.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Current Prediction Settings -->
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="current-prediction-setting-links" data-toggle="collapse" data-parent="#user-detail"
|
||||
href="#current-prediction-setting">Current Prediction Setting</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="current-prediction-setting" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
<table class="table table-bordered table-hover">
|
||||
<tr style="background-color: rgba(0, 0, 0, 0.08);">
|
||||
<th scope="col" width="20%">Parameter</th>
|
||||
<th scope="col" width="80%">Value</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
{% if user.default_setting.model %}
|
||||
<tr>
|
||||
<td width="20%">Model</td>
|
||||
<td width="80%">
|
||||
<table width="100%" class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<li class="list-group-item">
|
||||
<a href="{{user.default_setting.model.url}}">
|
||||
{{ user.default_setting.model.name }}
|
||||
</a>
|
||||
</li>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="20%">Model Parameter</th>
|
||||
<th width="80%">Parameter Value</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="20%">
|
||||
Threshold
|
||||
</td>
|
||||
<td width="80%">
|
||||
{{ user.default_setting.model_threshold }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if user.default_setting.rule_packages.all %}
|
||||
<tr>
|
||||
<td width="20%">Rule Packages</td>
|
||||
<td width="80%">
|
||||
<table width="100%" class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
{% for p in user.default_setting.rule_packages.all %}
|
||||
<li class="list-group-item">
|
||||
<a href="{{p.url}}">
|
||||
{{ p.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td>
|
||||
<p>Max Nodes</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ user.default_setting.max_nodes }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Max Depth</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ user.default_setting.max_depth }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
857
templates/pathway_playground.html
Normal file
857
templates/pathway_playground.html
Normal file
@ -0,0 +1,857 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
|
||||
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="viz"></div>
|
||||
</body>
|
||||
<script>
|
||||
data = {
|
||||
"aliases" : [ ] ,
|
||||
"completed" : "true" ,
|
||||
"description" : "1,1,1-Trichloro-2,2-bis-(4`-chlorophenyl)ethane (DDT), the first of the chlorinated organic insecticides, is a widely distributed and persistent xenobiotic contaminant in the environment. DDT is not metabolized very rapidly by animals; instead, it is deposited and stored in the fatty tissues. The biological half-life of DDT is about eight years; that is, it takes about eight years for an animal to metabolize half of the amount it assimilates. If ingestion continues at a steady rate, DDT builds up within the animal over time. Despite being banned in the United States, DDT continues to be widely used in many developing nations. This page shows only its aerobic pathway. The anaerobic degradation of DDT is documented elsewhere in the EAWAG-BBD. The chemical structure of DDT, including aromatic and alicyclic moieties, offers a variety of possibilities for biochemical attack. Several aerobic pathways for DDT metabolism in different organisms were suggested ([http://www.ncbi.nlm.nih.gov/pubmed/9563945|Quensen et al., 1998], [http://www.ncbi.nlm.nih.gov/pubmed/9603826|Hay et al., 1998], [http://www.ncbi.nlm.nih.gov/pubmed/8117093|Nadeau et al., 1994]). Compounds in brackets were not identified but postulated based on other studies, such as those of the Biphenyl Pathway. The steps labeled A, B, C, D, E are mutiple steps whose intermediates are not identified yet. All descriptions as follows were proposed based on other similar experiments. In A, DDE is attacked by a dioxygenase at the ortho and meta positions. Such an attack would give rise to a 2,3-dihydrodiol-DDE intermediate. In B and D, 2-(4`-Chlorophenyl)-3,3-dichloropropenoate may proceed via decarboxylation to yield 1,1-dichloro-(4`-chlorophenyl)ethane. The latter will undergo oxidation of the aliphatic side chain to yield 1,1-dichloro-(4`-chlorophenyl)ethanol which is further oxidized to yield 4-Chloroacetophenone. The terminal methyl group of 1,1-dichloro-(4`-chlorophenyl)ethane may also undergo oxidation to yield phenylacetic acid. In C, the transformation of 4-Chloroacetophenone to 4-Chlorobenzaldehyde may be via complete oxidation and subsequent decarboxylation of the terminal methyl group. In E, the ring-cleavage product would be further degraded to either a C-6- or C-5-chlorinated acid, depending on where the hydrolytic cleavage takes place." ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe" ,
|
||||
"isIncremental" : false ,
|
||||
"isPredicted" : false ,
|
||||
"lastModified" : 1447842835894 ,
|
||||
"links" : [
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "cis-2,3-dihydrodiol DDT dehydrogenase" ,
|
||||
"ecNumber" : "1.3.1.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/fbdf7cea-0668-442d-ba03-4025f8860f67" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/0c6fafc8-6352-4efe-b670-9d1394a13b2f" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0451" ,
|
||||
"pseudo" : false ,
|
||||
"rule" : "[#6:9]:[#6:10]@-[C:6]([H])([#8:2][H:11])[C:5]([H])(@-[#6:7]:[#6:8])[#8:1][H:12]>>[H:12][#8:1]-[#6:5](-[#6:7]:[#6:8])=[#6:6](-[#8:2][H:11])-[#6:10]:[#6:9]" ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 4 ,
|
||||
"target" : 11
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "6-oxo-2-hydroxy-7-(4`-chlorophenyl)-3,8,8-trichloroocta-2E,4E,7-trienoate hydrolase" ,
|
||||
"ecNumber" : "3.7.1.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/6c20062c-5239-41ff-af4f-646f7f98c1c4" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/c8d0efd3-8918-4efb-b20f-487351ff810f" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0444" ,
|
||||
"pseudo" : true ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 5 ,
|
||||
"target" : 14
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "6-oxo-2-hydroxy-7-(4`-chlorophenyl)-3,8,8-trichloroocta-2E,4E,7-trienoate hydrolase" ,
|
||||
"ecNumber" : "3.7.1.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/6c20062c-5239-41ff-af4f-646f7f98c1c4" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/c8d0efd3-8918-4efb-b20f-487351ff810f" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0444" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 14 ,
|
||||
"target" : 2
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "6-oxo-2-hydroxy-7-(4`-chlorophenyl)-3,8,8-trichloroocta-2E,4E,7-trienoate hydrolase" ,
|
||||
"ecNumber" : "3.7.1.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/6c20062c-5239-41ff-af4f-646f7f98c1c4" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/c8d0efd3-8918-4efb-b20f-487351ff810f" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0444" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 14 ,
|
||||
"target" : 12
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/a773904c-fde0-40b1-85da-149dd1e36601" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/490c42b9-8553-4015-8642-4655f1bee7d7" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0454" ,
|
||||
"pseudo" : true ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 12 ,
|
||||
"target" : 15
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/a773904c-fde0-40b1-85da-149dd1e36601" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/490c42b9-8553-4015-8642-4655f1bee7d7" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0454" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 15 ,
|
||||
"target" : 13
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/7eb884e4-5bb0-4ee1-88d7-3c344f7c4329" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/1e6e16b9-9cbb-467b-89ab-ef6e50f75f71" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0446" ,
|
||||
"pseudo" : true ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 10 ,
|
||||
"target" : 16
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/7eb884e4-5bb0-4ee1-88d7-3c344f7c4329" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/1e6e16b9-9cbb-467b-89ab-ef6e50f75f71" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0446" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 16 ,
|
||||
"target" : 3
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/7786bdf9-9986-44c7-a5de-9b0875efa2be" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/507b03af-31fa-4469-b68e-cf1249ba3118" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0453" ,
|
||||
"pseudo" : true ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 7 ,
|
||||
"target" : 17
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/7786bdf9-9986-44c7-a5de-9b0875efa2be" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/507b03af-31fa-4469-b68e-cf1249ba3118" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0453" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 17 ,
|
||||
"target" : 6
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "2,3-dihydroxy DDT 1,2-dioxygenase" ,
|
||||
"ecNumber" : "1.13.11.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/8d6004b8-8823-4b89-b8e2-959f06eea41d" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/d4f1b30e-f596-43fc-b777-88e4709ede68" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0452" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 11 ,
|
||||
"target" : 7
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "DDT 2,3-dioxygenase" ,
|
||||
"ecNumber" : "1.14.12.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/ff193e7b-f010-43d4-acb3-45f34d938824" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/e11419cd-6b46-470b-8a06-a08d62281734" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0450" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 0 ,
|
||||
"target" : 4
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "4-chlorobenzaldehyde oxidase" ,
|
||||
"ecNumber" : "1.2.-.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/f9f6aeae-3dfd-4337-b523-5f55bf84ec38" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/ee884e1b-58ab-4139-9867-d26fb5d1e0da" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0447" ,
|
||||
"pseudo" : false ,
|
||||
"rule" : "[H][#6:1](-[#6:5])=[O:4]>>[#6:5]-[#6:1](-[#8-])=[O:4]" ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 3 ,
|
||||
"target" : 6
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/8a9e85eb-4c7c-47c3-993b-4225e8ef2815" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/0302c1eb-ef63-4ecf-a0ed-1ff96e1333a1" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0445" ,
|
||||
"pseudo" : true ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 12 ,
|
||||
"target" : 18
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/8a9e85eb-4c7c-47c3-993b-4225e8ef2815" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/0302c1eb-ef63-4ecf-a0ed-1ff96e1333a1" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0445" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 18 ,
|
||||
"target" : 10
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/52a90af9-5c2b-48cd-9d22-c332d927ab6b" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/d13eda90-4abc-4bbf-9fa6-88e2736df59b" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0441" ,
|
||||
"pseudo" : true ,
|
||||
"rule" : "[H][c:1]1[c:7][c:10][c:9][#6,#7;a:8][c:2]1[H]>>[#8]-[c:1]1[c:7][c:10][c:9][#6,#7;a:8][c:2]1-[#8]" ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 1 ,
|
||||
"target" : 19
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [ ] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/52a90af9-5c2b-48cd-9d22-c332d927ab6b" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/d13eda90-4abc-4bbf-9fa6-88e2736df59b" ,
|
||||
"multistep" : "true" ,
|
||||
"name" : "Eawag BBD reaction r0441" ,
|
||||
"pseudo" : false ,
|
||||
"rule" : "[H][c:1]1[c:7][c:10][c:9][#6,#7;a:8][c:2]1[H]>>[#8]-[c:1]1[c:7][c:10][c:9][#6,#7;a:8][c:2]1-[#8]" ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 19 ,
|
||||
"target" : 9
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "DDE reductive dehalogenase" ,
|
||||
"ecNumber" : "1.97.1.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/ee196861-bd32-456f-99cc-8119c9bad882" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/5c932def-ef54-4394-a4e3-338da43b96cc" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0440" ,
|
||||
"pseudo" : false ,
|
||||
"rule" : "[#6:1]-[#17,#35,#53]>>[#6:1][H]" ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 1 ,
|
||||
"target" : 8
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "1,1-dichloro-2-(dihydroxy-4-chlorophenyl)-(4-chlorophenyl)ethylene 1,2-dioxygenase" ,
|
||||
"ecNumber" : "1.13.11.-"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/4e55a813-953a-4639-b414-a96fb7bd31e4" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/cb5db6a6-f9ea-4fd6-816e-838dcd56f287" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0442" ,
|
||||
"pseudo" : false ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 9 ,
|
||||
"target" : 5
|
||||
} ,
|
||||
{
|
||||
"ecNumbers" : [
|
||||
{
|
||||
"ecName" : "DDT dehydrochlorinase" ,
|
||||
"ecNumber" : "4.5.1.1"
|
||||
}
|
||||
] ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/4929ec97-626c-4f5f-836f-7136e6012ed8" ,
|
||||
"idreaction" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/reaction/5d1851fc-787a-43ce-b613-f1192595e0a5" ,
|
||||
"multistep" : "false" ,
|
||||
"name" : "Eawag BBD reaction r0439" ,
|
||||
"pseudo" : false ,
|
||||
"rule" : "[H][C:6]([c:12]1[c:11][c:10][c:9](-[#9,#17,#35,#53:19])[c:8][c:7]1)([c:13]1[c:14][c:18][c:17](-[#9,#17,#35,#53:20])[c:16][c:15]1)[C:5]([#1,#17,#35,#53])([#1,#17,#35,#53:3])[#1,#17,#35,#53:4]>>[#1,#17,#35,#53:3]\\[#6:5](-[#1,#17,#35,#53:4])=[#6:6](\\[c:12]1[c:11][c:10][c:9](-[#9,#17,#35,#53:19])[c:8][c:7]1)-[c:13]1[c:14][c:18][c:17](-[#9,#17,#35,#53:20])[c:16][c:15]1" ,
|
||||
"scenarios" : [ ] ,
|
||||
"source" : 0 ,
|
||||
"target" : 1
|
||||
}
|
||||
] ,
|
||||
"name" : "1,1,1-Trichloro-2,2-bis-(4`-chlorophenyl)ethane (DDT)" ,
|
||||
"nodes" : [
|
||||
{
|
||||
"atomCount" : 19 ,
|
||||
"depth" : 0 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/b1f9ae78-1710-46d9-bfc6-52d07f524206" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/e6561f48-328e-4815-8fa8-1745613149fe/structure/79eb379c-b696-46d7-8a2e-bd5aceab8d63" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/e6561f48-328e-4815-8fa8-1745613149fe/structure/79eb379c-b696-46d7-8a2e-bd5aceab8d63" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/b1f9ae78-1710-46d9-bfc6-52d07f524206?image=svg" ,
|
||||
"imageSize" : 730 ,
|
||||
"name" : "1,1,1-Trichloro-2,2-bis-(4`-chlorophenyl)ethane (DDT)" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(C2=CC=C(C=C2)Cl)C(Cl)(Cl)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 18 ,
|
||||
"depth" : 1 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/59f7f681-cecd-45ae-8b80-aef89f38bf49" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/c2d9c606-166a-4877-9135-a57884404cde/structure/e2cd8fa7-c37e-48ee-a3c5-d2ebcd3c11ba" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/c2d9c606-166a-4877-9135-a57884404cde/structure/e2cd8fa7-c37e-48ee-a3c5-d2ebcd3c11ba" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/59f7f681-cecd-45ae-8b80-aef89f38bf49?image=svg" ,
|
||||
"imageSize" : 730 ,
|
||||
"name" : "1,1-Dichloro-2,2-bis(4`-chlorophenyl)ethylene (DDE)" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(=C(Cl)Cl)C2=CC=C(C=C2)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 9 ,
|
||||
"depth" : 4 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/ef4b1fa2-f47c-43d2-b743-4efbc1dd3d6c" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/7d13a253-8427-4ea0-852d-aaf5761d84eb/structure/7c751e49-2507-4e07-92ff-844926d02897" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/7d13a253-8427-4ea0-852d-aaf5761d84eb/structure/7c751e49-2507-4e07-92ff-844926d02897" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/ef4b1fa2-f47c-43d2-b743-4efbc1dd3d6c?image=svg" ,
|
||||
"imageSize" : 490 ,
|
||||
"name" : "cis-2-Hydroxy-3-chloropenta-2,4-dienone" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C=C/C(=C(\\C(=O)[O-])/O)/Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 9 ,
|
||||
"depth" : 6 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/b252c528-8cfb-4c46-a4c6-d073ff83a2a7" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/0cfdbe4b-5cd3-4822-a241-d9cbd865d1cc/structure/70271b5f-57bf-4f0f-bfff-171011475ce8" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/0cfdbe4b-5cd3-4822-a241-d9cbd865d1cc/structure/70271b5f-57bf-4f0f-bfff-171011475ce8" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/b252c528-8cfb-4c46-a4c6-d073ff83a2a7?image=svg" ,
|
||||
"imageSize" : 485 ,
|
||||
"name" : "4-Chlorobenzaldehyde" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C=O"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 21 ,
|
||||
"depth" : 1 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/55b5d61c-cb87-4102-835b-ed5b4c8b0c1e" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/77e86fba-5c3c-4661-9053-c07fd3b7ab76/structure/8b09ca8d-e227-464f-9af2-7b5858cd5956" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/77e86fba-5c3c-4661-9053-c07fd3b7ab76/structure/8b09ca8d-e227-464f-9af2-7b5858cd5956" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/55b5d61c-cb87-4102-835b-ed5b4c8b0c1e?image=svg" ,
|
||||
"imageSize" : 753 ,
|
||||
"name" : "cis-2,3-Dihydrodiol DDT" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(C2=CC=C([C@H]([C@H]2O)O)Cl)C(Cl)(Cl)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 22 ,
|
||||
"depth" : 3 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/a3261162-cbcc-494b-9d9b-7d7ecc1b2c15" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/9a2cff63-11ca-45a2-961f-3ff78882b455/structure/7106bb90-651e-4aea-811d-652af7ff46f0" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/9a2cff63-11ca-45a2-961f-3ff78882b455/structure/7106bb90-651e-4aea-811d-652af7ff46f0" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/a3261162-cbcc-494b-9d9b-7d7ecc1b2c15?image=svg" ,
|
||||
"imageSize" : 919 ,
|
||||
"name" : "6-Oxo-2-hydroxy-7-(4`-chlorophenyl)-3,8,8-trichloroocta-2Z,4Z,7-trienoate" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(=C(Cl)Cl)C(=O)/C=C\\C(=C(/C(=O)[O-])\\O)\\Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 10 ,
|
||||
"depth" : 4 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/31f79480-c2a7-4b94-a26a-8901c0b9ee38" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/4424cf9c-bf55-4dca-a587-ea60a6ec84df/structure/96dfe5fd-e48d-4e07-98eb-f9cb8d16e246" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/4424cf9c-bf55-4dca-a587-ea60a6ec84df/structure/96dfe5fd-e48d-4e07-98eb-f9cb8d16e246" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/31f79480-c2a7-4b94-a26a-8901c0b9ee38?image=svg" ,
|
||||
"imageSize" : 503 ,
|
||||
"name" : "4-Chlorobenzoate" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(=O)[O-]"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 23 ,
|
||||
"depth" : 3 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/01aafa69-ee6a-43b6-a1c5-30b10ea60fec" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/7ded624f-d231-41b4-a409-532fbc5e8e8f/structure/77a2ca5c-7027-4493-97c8-ab7d3bc86b93" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/7ded624f-d231-41b4-a409-532fbc5e8e8f/structure/77a2ca5c-7027-4493-97c8-ab7d3bc86b93" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/01aafa69-ee6a-43b6-a1c5-30b10ea60fec?image=svg" ,
|
||||
"imageSize" : 919 ,
|
||||
"name" : "6-Oxo-2-hydroxy-7-(4`-chlorophenyl)-3,8,8,8-tetrachloroocta-2Z,4Z-dienoate" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(C(=O)/C=C\\C(=C(/C(=O)[O-])\\O)\\Cl)C(Cl)(Cl)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 17 ,
|
||||
"depth" : 2 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/b61e0141-3263-40e8-abbe-a1f67217531a" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/dd79e998-a09e-4b00-a19a-03f1fad65c68/structure/ab3e8672-c32a-4d64-9e57-14fe5c9f4c5e" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/dd79e998-a09e-4b00-a19a-03f1fad65c68/structure/ab3e8672-c32a-4d64-9e57-14fe5c9f4c5e" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/b61e0141-3263-40e8-abbe-a1f67217531a?image=svg" ,
|
||||
"imageSize" : 730 ,
|
||||
"name" : "1-Chloro-2,2-bis(4`-chlorophenyl)ethylene (DDMU)" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(=CCl)C2=CC=C(C=C2)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 20 ,
|
||||
"depth" : 2 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/0048363c-e3d9-476d-a8a7-3bf862ce808f" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/82f091b3-9bc0-49e7-8a55-91d27e5a3620/structure/5e7dbebe-1702-4658-ab13-cd7675afb57f" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/82f091b3-9bc0-49e7-8a55-91d27e5a3620/structure/5e7dbebe-1702-4658-ab13-cd7675afb57f" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/0048363c-e3d9-476d-a8a7-3bf862ce808f?image=svg" ,
|
||||
"imageSize" : 753 ,
|
||||
"name" : "1,1-Dichloro-2-(dihydroxy-4`-chorophenyl)-2-(4`-chlorophenyl)ethylene" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(=C(Cl)Cl)C2=CC=C(C(=C2O)O)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 10 ,
|
||||
"depth" : 5 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/cbe31c9a-d2d0-48f4-a8e5-599fdd123064" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/0049eba5-6e57-4c32-b923-37ce78bc5834/structure/12d8d3c0-b30a-4ccc-a733-958dd495af7d" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/0049eba5-6e57-4c32-b923-37ce78bc5834/structure/12d8d3c0-b30a-4ccc-a733-958dd495af7d" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/cbe31c9a-d2d0-48f4-a8e5-599fdd123064?image=svg" ,
|
||||
"imageSize" : 526 ,
|
||||
"name" : "4-Chloroacetophenone" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "CC(=O)C1=CC=C(C=C1)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 21 ,
|
||||
"depth" : 2 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/515f06b4-348e-4b72-9959-d684bbaabcc1" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/5f8ed779-d815-4e8d-92c9-85283e466fd7/structure/f2bd2e43-8026-4db2-9735-735b0636e612" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/5f8ed779-d815-4e8d-92c9-85283e466fd7/structure/f2bd2e43-8026-4db2-9735-735b0636e612" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/515f06b4-348e-4b72-9959-d684bbaabcc1?image=svg" ,
|
||||
"imageSize" : 753 ,
|
||||
"name" : "2,3-Dihydroxy DDT" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(C2=CC=C(C(=C2O)O)Cl)C(Cl)(Cl)Cl"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 14 ,
|
||||
"depth" : 4 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/ef6d57db-f3aa-45e8-9b9b-592b3220121e" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/ada1d265-153c-467f-8d07-47908b1c574a/structure/99874945-e704-4e38-a6d9-0f344dd0ca3f" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/ada1d265-153c-467f-8d07-47908b1c574a/structure/99874945-e704-4e38-a6d9-0f344dd0ca3f" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/ef6d57db-f3aa-45e8-9b9b-592b3220121e?image=svg" ,
|
||||
"imageSize" : 603 ,
|
||||
"name" : "2-(4`-Chlorophenyl)-3,3-dichloropropenoate" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)C(=C(Cl)Cl)C(=O)[O-]"
|
||||
} ,
|
||||
{
|
||||
"atomCount" : 11 ,
|
||||
"depth" : 5 ,
|
||||
"dt50s" : [ ] ,
|
||||
"engineeredIntermediate" : false ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/4b90c6a1-4e3f-43f9-97f8-21e0e1a4bfac" ,
|
||||
"idcomp" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/127fe34e-af40-4ba4-bf1b-e20bf560a879/structure/a5335e8f-6377-4919-939f-16a44f32a13b" ,
|
||||
"idreact" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/compound/127fe34e-af40-4ba4-bf1b-e20bf560a879/structure/a5335e8f-6377-4919-939f-16a44f32a13b" ,
|
||||
"image" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/node/4b90c6a1-4e3f-43f9-97f8-21e0e1a4bfac?image=svg" ,
|
||||
"imageSize" : 603 ,
|
||||
"name" : "4-Chlorophenylacetate" ,
|
||||
"proposed" : [ ] ,
|
||||
"smiles" : "C1=C(C=CC(=C1)Cl)CC(=O)[O-]"
|
||||
} ,
|
||||
{
|
||||
"depth" : -1 ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/6c20062c-5239-41ff-af4f-646f7f98c1c4" ,
|
||||
"name" : "Eawag BBD reaction r0444" ,
|
||||
"pseudo" : "left"
|
||||
} ,
|
||||
{
|
||||
"depth" : -1 ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/a773904c-fde0-40b1-85da-149dd1e36601" ,
|
||||
"name" : "Eawag BBD reaction r0454" ,
|
||||
"pseudo" : "left"
|
||||
} ,
|
||||
{
|
||||
"depth" : -1 ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/7eb884e4-5bb0-4ee1-88d7-3c344f7c4329" ,
|
||||
"name" : "Eawag BBD reaction r0446" ,
|
||||
"pseudo" : "left"
|
||||
} ,
|
||||
{
|
||||
"depth" : -1 ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/7786bdf9-9986-44c7-a5de-9b0875efa2be" ,
|
||||
"name" : "Eawag BBD reaction r0453" ,
|
||||
"pseudo" : "left"
|
||||
} ,
|
||||
{
|
||||
"depth" : -1 ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/8a9e85eb-4c7c-47c3-993b-4225e8ef2815" ,
|
||||
"name" : "Eawag BBD reaction r0445" ,
|
||||
"pseudo" : "left"
|
||||
} ,
|
||||
{
|
||||
"depth" : -1 ,
|
||||
"id" : "https://envipath.org/package/32de3cf4-e3e6-4168-956e-32fa5ddb0ce1/pathway/3f58e4d4-1c63-4b30-bf31-7ae4b98899fe/edge/52a90af9-5c2b-48cd-9d22-c332d927ab6b" ,
|
||||
"name" : "Eawag BBD reaction r0441" ,
|
||||
"pseudo" : "left"
|
||||
}
|
||||
] ,
|
||||
"pathwayName" : "1,1,1-Trichloro-2,2-bis-(4`-chlorophenyl)ethane (DDT)" ,
|
||||
"reviewStatus" : "reviewed" ,
|
||||
"scenarios" : [ ] ,
|
||||
"upToDate" : true
|
||||
}
|
||||
|
||||
|
||||
data = {{ pathway.d3_json | safe }};
|
||||
|
||||
|
||||
// Colors
|
||||
var lightGrey = "#E8E8E8";
|
||||
var grey = "#B2B2B2";
|
||||
|
||||
var border = "thin solid lightgrey";
|
||||
var compoundImageMargin = 0.15; // compounds images are rectangles, reduce size to fit into nodes
|
||||
var treeLayoutCharge = -1000; // compounds push each other apart
|
||||
|
||||
var ADView = false;
|
||||
var compoundStroke = "black";
|
||||
var compoundStrokeRoot = "red";
|
||||
var showCompoundOutlines = false;
|
||||
var compoundSize = 75; // = diameter of nodes of small compounds
|
||||
var maxCompoundSize = function(){ return 1.5 * compoundSize }; // limit increased size of larger compounds
|
||||
var maxCompoundPopupSize = function(){ return 5 * compoundSize };
|
||||
var compoundFill = lightGrey;
|
||||
var compoundFillSelected = grey;
|
||||
var compoundStrokeWidth = function(){ return 0.04 * compoundSize };
|
||||
|
||||
var outsideAD = "#ff9999";
|
||||
var insideAD = "#007000";
|
||||
|
||||
var width = document.getElementById("viz").offsetWidth;
|
||||
var height = width * 0.75;
|
||||
|
||||
|
||||
function redraw() {
|
||||
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
|
||||
}
|
||||
|
||||
|
||||
function dragstart(d, i) {
|
||||
<!-- pop_hideall();-->
|
||||
d3.event.sourceEvent.stopPropagation();
|
||||
force.stop();
|
||||
}
|
||||
|
||||
function dragmove(d, i) {
|
||||
d3.event.sourceEvent.stopPropagation();
|
||||
d.px += d3.event.dx;
|
||||
d.py += d3.event.dy;
|
||||
d.x += d3.event.dx;
|
||||
d.y += d3.event.dy;
|
||||
tick();
|
||||
}
|
||||
|
||||
function dragend(d, i) {
|
||||
<!-- pop_show();-->
|
||||
d3.event.sourceEvent.stopPropagation();
|
||||
d.fixed = true;
|
||||
tick();
|
||||
force.resume();
|
||||
}
|
||||
|
||||
|
||||
function computeNodeSizes(nodes) {
|
||||
|
||||
// step1: determine size of smallest compound
|
||||
min_size = 1000000;
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
if (!nodes[i].pseudo) {
|
||||
s = nodes[i].imageSize;
|
||||
if (s < min_size) {
|
||||
min_size = s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// step2: compute scaled size and store as .size
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
if (!nodes[i].pseudo) {
|
||||
size = nodes[i].imageSize;
|
||||
r = size/min_size;
|
||||
size = r * compoundSize;
|
||||
nodes[i].size = Math.min(size,maxCompoundSize());
|
||||
nodes[i].popupSize = Math.min(size,maxCompoundPopupSize());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setTreePositions(nodes) {
|
||||
// positions for tree layout
|
||||
// y: set node at treeLevel
|
||||
// x: equally distriute according to number of nodes per level (for non-pseudo nodes)
|
||||
for (var level in treeLayout) {
|
||||
xStart = (width * 0.5) - (treeLayoutXInitMargin() * (treeLayout[level].length-1) * 0.5)
|
||||
treeLayout[level].forEach(function (node,j) {
|
||||
if (!node.pseudo) {
|
||||
x = xStart + j * treeLayoutXInitMargin();
|
||||
node.x = x;
|
||||
node.px = x;
|
||||
}
|
||||
y = treeLayoutLevels()*node.treeLevel + compoundSize;
|
||||
node.y = y;
|
||||
node.py = y;
|
||||
});
|
||||
}
|
||||
|
||||
// update x for pseudo nodes: set in between parents and children
|
||||
for (var level in treeLayout) {
|
||||
treeLayout[level].forEach(function (node,j) {
|
||||
if (node.pseudo) {
|
||||
sumX = 0;
|
||||
countX = 0;
|
||||
(node.parents.concat(node.children)).forEach(function (n,j) {
|
||||
if (!n.pseudo) {
|
||||
sumX += n.x;
|
||||
countX += 1;
|
||||
}
|
||||
});
|
||||
x = sumX/countX;
|
||||
node.x = x;
|
||||
node.px = x;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function tick() {
|
||||
|
||||
nodes.attr("transform", function(d) {
|
||||
return "translate(" + d.x + "," + d.y + ")";
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(pathway) {
|
||||
// In case its called another time
|
||||
d3.select("svg").remove();
|
||||
|
||||
// Gen SVG
|
||||
svg = d3.select("#viz")
|
||||
.append("svg")
|
||||
.attr("width", "100%")
|
||||
.attr("height", height)
|
||||
.style("border", border)
|
||||
.attr("inline", "block")
|
||||
.attr("margin", "auto")
|
||||
.attr("pointer-events", "all")
|
||||
.append('svg:g')
|
||||
.call(d3.behavior.zoom().on("zoom", redraw))
|
||||
.attr("preserveAspectRatio", "xMidYMid meet")
|
||||
.append('svg:g');
|
||||
|
||||
force = d3.layout.force()
|
||||
.charge(0) //.charge(treeLayoutCharge)
|
||||
.gravity(0)
|
||||
.size([width, height]);
|
||||
force.nodes(pathway.nodes)
|
||||
.links(pathway.links)
|
||||
.start();
|
||||
|
||||
|
||||
// Background rectangle to enable zoom
|
||||
svg.append('svg:rect')
|
||||
.attr('width', 9 * width)
|
||||
.attr('height', 9 * height)
|
||||
.attr('fill', 'grey')
|
||||
.attr("x", -4 * width)
|
||||
.attr("y", -4 * height)
|
||||
.attr("opacity", 1.0);
|
||||
|
||||
|
||||
computeNodeSizes(pathway.nodes);
|
||||
|
||||
|
||||
var node_drag = d3.behavior.drag()
|
||||
.on("dragstart", dragstart)
|
||||
.on("drag", dragmove)
|
||||
.on("dragend", dragend);
|
||||
|
||||
nodes = svg.selectAll(".node")
|
||||
.data(pathway.nodes)
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "node")
|
||||
.call(node_drag);
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- setTreeLevel(graph)-->
|
||||
<!-- var treeLayout = buildTreeLayout(graph)-->
|
||||
|
||||
|
||||
|
||||
|
||||
circles = nodes.append("circle")
|
||||
.attr("class", "circle")
|
||||
.attr("cx", 0)
|
||||
.attr("cy", 0)
|
||||
.attr("depth", function(d) {
|
||||
return d.depth;
|
||||
})
|
||||
.attr("r", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return d.size * 0.5;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
.style("stroke", function(d) {
|
||||
if(ADView) {
|
||||
if(d.ad){
|
||||
if(d.ad['inAD']) {
|
||||
return adIn;
|
||||
} else {
|
||||
return adOut;
|
||||
}
|
||||
}
|
||||
return "black";
|
||||
} else if (d.depth == 0) {
|
||||
return compoundStrokeRoot;
|
||||
} else {
|
||||
return compoundStroke;
|
||||
}
|
||||
}).style("stroke-opacity",function(d) {
|
||||
if(ADView) {
|
||||
return 1;
|
||||
} else if (showCompoundOutlines) {
|
||||
return compoundStrokeOpacity(d);
|
||||
} else {
|
||||
return 0.0;
|
||||
}
|
||||
})
|
||||
.style("stroke-width", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return compoundStrokeWidth() + "px";
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
.style("fill", function(d) {
|
||||
if(d.engineeredIntermediate) {
|
||||
return "#dcfcf9"
|
||||
}else {
|
||||
return compoundFill
|
||||
}
|
||||
|
||||
})
|
||||
.style("fill-opacity", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return "1";
|
||||
} else {
|
||||
return "0.0";
|
||||
}
|
||||
});
|
||||
|
||||
nodes.append("inAD").attr("inAD", function(d){
|
||||
if (!d.pseudo) {
|
||||
if(d.ad) {
|
||||
return d.ad['inAD'];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
nodes.append("image").attr("xlink:href", function(d) {
|
||||
if (!d.pseudo) {
|
||||
if(ADView) {
|
||||
return d.image += "&highlight=true";
|
||||
}
|
||||
return d.image;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}).attr("x", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return -0.5*(1.0-compoundImageMargin)*d.size
|
||||
}
|
||||
else {
|
||||
return 0;
|
||||
}
|
||||
}).attr("y", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return -0.5*(1.0-compoundImageMargin)*d.size
|
||||
}
|
||||
else {
|
||||
return 0;
|
||||
}
|
||||
}).on("click",
|
||||
function(d) {
|
||||
if (!d.pseudo) {
|
||||
console.log("Node clicked: " + d);
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}).attr("width", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return d.size * (1.0-compoundImageMargin);
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}).attr("height", function(d) {
|
||||
if (!d.pseudo) {
|
||||
return d.size * (1.0-compoundImageMargin);
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
// call initial tick()
|
||||
tick()
|
||||
|
||||
}
|
||||
|
||||
drawGraph(data);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
194
templates/pathway_playground2.html
Normal file
194
templates/pathway_playground2.html
Normal file
@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Force-Directed Tree</title>
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg { width: 100%; height: 600px; }
|
||||
.link { stroke: #999; stroke-opacity: 0.6; marker-end: url(#arrow); }
|
||||
.link_no_arrow { stroke: #999; stroke-opacity: 0.6; }
|
||||
.node image { cursor: pointer; }
|
||||
.node circle { fill: lightblue; stroke: steelblue; stroke-width: 1.5px; }
|
||||
.highlighted { stroke: red; stroke-width: 3px; }
|
||||
.tooltip { position: absolute; background: lightgray; padding: 5px; border-radius: 5px; visibility: hidden; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p></p>
|
||||
{{ pathway.name }}
|
||||
<div id="viz">
|
||||
<svg width="2000" height="2000"> <!-- Sehr großes SVG für Zoom -->
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
<script>
|
||||
|
||||
function assignPositions(nodes) {
|
||||
const levelSpacing = 75; // Vertikaler Abstand zwischen den Tiefen
|
||||
const horizontalSpacing = 75; // Abstand zwischen Knoten auf gleicher Tiefe
|
||||
const depthMap = new Map();
|
||||
|
||||
nodes.forEach(node => {
|
||||
if (!depthMap.has(node.depth)) {
|
||||
depthMap.set(node.depth, 0);
|
||||
}
|
||||
|
||||
// Gleichmäßige horizontale Verteilung je nach Anzahl Knoten pro Tiefe
|
||||
const nodesInLevel = nodes.filter(n => n.depth === node.depth).length;
|
||||
node.fx = width / 2 + depthMap.get(node.depth) * horizontalSpacing - ((nodesInLevel - 1) * horizontalSpacing) / 2;
|
||||
node.fy = node.depth * levelSpacing + 50;
|
||||
|
||||
depthMap.set(node.depth, depthMap.get(node.depth) + 1);
|
||||
});
|
||||
}
|
||||
|
||||
function nodeClick(event, node, t) {
|
||||
console.log(node);
|
||||
d3.select(t).select("circle").classed("highlighted", !d3.select(t).select("circle").classed("highlighted"));
|
||||
}
|
||||
|
||||
const nodeRadius = 20;
|
||||
const linkDistance = 100;
|
||||
const chargeStrength = -200;
|
||||
const depthSpacing = 150;
|
||||
const width = 800, height = 600;
|
||||
|
||||
const tooltip = d3.select("#tooltip");
|
||||
const zoomable = d3.select("#zoomable");
|
||||
|
||||
// Zoom Funktion aktivieren
|
||||
const zoom = d3.zoom()
|
||||
.scaleExtent([0.5, 5])
|
||||
.on("zoom", (event) => {
|
||||
zoomable.attr("transform", event.transform);
|
||||
});
|
||||
|
||||
d3.select("svg").call(zoom);
|
||||
|
||||
data = {{ pathway.d3_json | safe }};
|
||||
nodes = data['nodes'];
|
||||
links = data['links'];
|
||||
|
||||
assignPositions(nodes);
|
||||
|
||||
// Physik-Simulation für den Graphen
|
||||
<!-- const simulation = d3.forceSimulation(nodes)-->
|
||||
<!-- .force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance))-->
|
||||
<!-- .force("y", d3.forceY(d => d.depth * depthSpacing + 50))-->
|
||||
<!-- .force("x", d3.forceX(width / 2))-->
|
||||
<!-- .force("charge", d3.forceManyBody().strength(chargeStrength))-->
|
||||
<!-- .force("center", d3.forceCenter(width / 2, height / 4))-->
|
||||
<!-- .on("tick", ticked);-->
|
||||
<!-- -->
|
||||
const simulation = d3.forceSimulation(nodes)
|
||||
.force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance))
|
||||
.force("charge", d3.forceManyBody().strength(chargeStrength))
|
||||
.force("center", d3.forceCenter(width / 2, height / 4))
|
||||
.on("tick", ticked);
|
||||
|
||||
// Kanten zeichnen
|
||||
const link = zoomable.append("g")
|
||||
.selectAll("line")
|
||||
.data(links)
|
||||
.enter().append("line")
|
||||
// Check if target is pseudo and draw marker only if not pseudo
|
||||
.attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
|
||||
.on("mouseover", (event, d) => {
|
||||
tooltip.style("visibility", "visible")
|
||||
.text(`Link: ${d.source.id} → ${d.target.id}`)
|
||||
.style("top", `${event.pageY + 5}px`)
|
||||
.style("left", `${event.pageX + 5}px`);
|
||||
})
|
||||
.on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
|
||||
// Knoten zeichnen
|
||||
const node = zoomable.append("g")
|
||||
.selectAll("g")
|
||||
.data(nodes)
|
||||
.enter().append("g")
|
||||
.call(d3.drag()
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended))
|
||||
.on("click", function(event, d) {
|
||||
nodeClick(event, d, this);
|
||||
<!-- console.log(event); console.log(d);console.log(this);-->
|
||||
<!-- d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted"));-->
|
||||
})
|
||||
.on("mouseover", (event, d) => {
|
||||
if (d.pseudo) {
|
||||
return
|
||||
}
|
||||
tooltip.style("visibility", "visible")
|
||||
.text(`Node: ${d.id} Depth: ${d.depth}`)
|
||||
.style("top", `${event.pageY + 5}px`)
|
||||
.style("left", `${event.pageX + 5}px`);
|
||||
})
|
||||
.on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
|
||||
// Kreise für die Knoten hinzufügen
|
||||
node.append("circle")
|
||||
// make radius "invisible"
|
||||
.attr("r", d => d.pseudo ? 0.01 : nodeRadius)
|
||||
.style("fill", "#e8e8e8");
|
||||
|
||||
// Add image only for non pseudo nodes
|
||||
node.filter(d => !d.pseudo).append("image")
|
||||
.attr("xlink:href", d => d.image)
|
||||
.attr("x", -nodeRadius)
|
||||
.attr("y", -nodeRadius)
|
||||
.attr("width", nodeRadius * 2)
|
||||
.attr("height", nodeRadius * 2);
|
||||
|
||||
|
||||
// Funktion für das Update der Positionen
|
||||
function ticked() {
|
||||
link.attr("x1", d => d.source.x)
|
||||
.attr("y1", d => d.source.y)
|
||||
.attr("x2", d => d.target.x)
|
||||
.attr("y2", d => d.target.y);
|
||||
|
||||
node.attr("transform", d => `translate(${d.x},${d.y})`);
|
||||
}
|
||||
|
||||
function dragstarted(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x; // Setzt die Fixierung auf die aktuelle Position
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
function dragged(event, d) {
|
||||
d.fx = event.x; // Position direkt an Maus anpassen
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
function dragended(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
// Knoten bleibt an der neuen Position und wird nicht zurückgezogen
|
||||
}
|
||||
|
||||
</script>
|
||||
<svg width="400" height="300">
|
||||
<path d="M200,50 C200,100 150,150 150,200" stroke="black" fill="none" stroke-width="2"/>
|
||||
<path d="M200,50 C200,100 250,150 250,200" stroke="black" fill="none" stroke-width="2"/>
|
||||
|
||||
<!-- Knoten -->
|
||||
<circle cx="200" cy="50" r="5" fill="blue"/>
|
||||
<circle cx="150" cy="200" r="5" fill="red"/>
|
||||
<circle cx="250" cy="200" r="5" fill="red"/>
|
||||
</svg>
|
||||
</body>
|
||||
{% load static %}
|
||||
<script src="{% static 'js/pw.js' %}"></script>
|
||||
|
||||
</html>
|
||||
114
templates/search.html
Normal file
114
templates/search.html
Normal file
@ -0,0 +1,114 @@
|
||||
{% 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>
|
||||
</div>
|
||||
<div id="results">
|
||||
</div>
|
||||
<div id="loading"></div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
|
||||
$(function() {
|
||||
|
||||
tooltips = {
|
||||
'dropdown-predict-text-text': 'The inserted pattern will be searched on all enviPath object names and descriptions',
|
||||
'dropdown-search-smiles-default': 'Search by SMILES, stereochemistry and charge are ignored',
|
||||
'dropdown-search-smiles-canonical': 'Search by SMILES, stereochemistry is ignored but charge is preserved',
|
||||
'dropdown-search-smiles-exact': 'Search by SMILES, exact match for stereochemistry and charge',
|
||||
'dropdown-search-inchi-inchikey': 'Search by InChIKey',
|
||||
}
|
||||
|
||||
Object.keys(tooltips).forEach(key => {
|
||||
$('#' + key).tooltip({
|
||||
placement: "top",
|
||||
title: tooltips[key]
|
||||
});
|
||||
});
|
||||
|
||||
$("#selPackages").selectpicker();
|
||||
|
||||
$("#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));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
72
templates/tables/scenario.html
Normal file
72
templates/tables/scenario.html
Normal file
@ -0,0 +1,72 @@
|
||||
{% for obj in available_additional_information.types %}
|
||||
<div id="table-{{obj.type}}-Div">
|
||||
<table class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr id="{{ obj.type }}GroupRow" style="background-color: rgba(0, 0, 0, 0.08);">
|
||||
<td><p style="font-size:18px">{{obj.title}}</p></td>
|
||||
</tr>
|
||||
<!-- Loop through all AIs and attach the ones without subtype -->
|
||||
{% for ai in available_additional_information.ais %}
|
||||
<tr>
|
||||
{% if obj.type in ai.types and ai.sub_type is not defined %}
|
||||
<td><span title="">{{ ai.name }}</span></td>
|
||||
<!-- #TODO -->
|
||||
{% for c in "1 2 3"|make_list %}
|
||||
<td class="col-{{ c }}">
|
||||
{% for form in ai.forms %}
|
||||
<!-- Build input -->
|
||||
{% if form.type == 'select' %}
|
||||
<select class="form-control" name="{{ form.param_name}}">
|
||||
<option value="">{{ form.placeholder }}</option>
|
||||
{% for choice in form.choices %}
|
||||
<option value="{{ choice.value }}">
|
||||
{{ choice.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
<input type="{{ form.type }}" name="{{ form.param_name }}" class="form-control" placeholder="{{ form.placeholder|safe }}"/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% for subtype in available_additional_information.subtypes %}
|
||||
<tr id="{{ subtype.type }}GroupRow" style="background-color: rgba(0, 0, 0, 0.08);">
|
||||
<td><p style="font-size:18px">{{subtype.title}}</p></td>
|
||||
</tr>
|
||||
<!-- Loop through all AIs and attach the ones with the same subtype -->
|
||||
{% for ai in available_additional_information.ais %}
|
||||
<tr>
|
||||
{% if obj.type in ai.types and subtype.type == ai.sub_type %}
|
||||
<td><span title="">{{ ai.name }}</span></td>
|
||||
<!-- #TODO -->
|
||||
{% for c in "1 2 3"|make_list %}
|
||||
<td class="col-{{ c }}">
|
||||
{% for form in ai.forms %}
|
||||
<!-- Build input -->
|
||||
{% if form.type == 'select' %}
|
||||
<select class="form-control" name="{{ form.param_name }}">
|
||||
<option value="">{{ form.placeholder }}</option>
|
||||
{% for choice in form.choices %}
|
||||
<option value="{{ choice.value }}">
|
||||
{{ choice.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
<input type="{{ form.type }}" name="{{ form.param_name }}" class="form-control" placeholder="{{ form.placeholder|safe }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
Reference in New Issue
Block a user