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

Basic System (#31)

Browse Source 
Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#31
This commit is contained in:
jebus
2025-07-23 06:47:07 +12:00
parent 49e02ed97d
commit df896878f1
75 changed files with 3821 additions and 1429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/objects/composite_rule.html
View File

@ -11,7 +11,7 @@
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ rule.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span

242
templates/objects/compound.html
View File

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

2
templates/objects/compound_structure.html
View File

@ -11,7 +11,7 @@
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ compound_structure.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span

0
templates/objects/edge.html Normal file
View File

2
templates/objects/group.html
View File

@ -13,7 +13,7 @@
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ group.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span

509
templates/objects/model.html
View File

@ -1,263 +1,322 @@
{% extends "framework.html" %}
{% load static %}
{% load envipytags %}
{% block content %}
{% block action_modals %}
{% endblock action_modals %}
{% block action_modals %}
{% include "modals/objects/delete_model_modal.html" %}
{% endblock action_modals %}
<!-- Include required libs -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
<!-- Include required libs -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
<div class="panel-group" id="model-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ model.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
<p> {{ model.description }} </p>
</div>
<!-- Predict Panel -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
href="#predict-smiles">Predict</a>
</h4>
</div>
<div id="predict-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<div class="input-group">
<input id="smiles-to-predict" type="text" class="form-control" placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
</span>
<div class="panel-group" id="model-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ model.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/model.html" %}
{% endblock %}
</ul>
</div>
<div id="loading"></div>
<div id="predictResultTable"></div>
</div>
</div>
<!-- End Predict Panel -->
{% if model.model_status == 'FINISHED' %}
<!-- Single Gen Curve Panel -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
href="#sg-curve">Predict</a>
</h4>
</div>
<div id="sg-curve" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<!-- Center container contents -->
<div class="container" style="display: flex;justify-content: center;">
<div id="sg-curve-plotdiv" class="chart">
<div id="sg-chart"></div>
<div class="panel-body">
<p> {{ model.description }} </p>
</div>
{% if model|classname == 'MLRelativeReasoning' %}
<!-- Rule Packages -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-package-link" data-toggle="collapse" data-parent="#model-detail"
href="#rule-package">Rule Packages</a>
</h4>
</div>
<div id="rule-package" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for p in model.rule_packages.all %}
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
{% endfor %}
</div>
</div>
<!-- Reaction Packages -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="reaction-package-link" data-toggle="collapse" data-parent="#model-detail"
href="#reaction-package">Rule Packages</a>
</h4>
</div>
<div id="reaction-package" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for p in model.data_packages.all %}
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
{% endfor %}
</div>
</div>
{% if model.eval_packages.all|length > 0 %}
<!-- Eval Packages -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="eval-package-link" data-toggle="collapse" data-parent="#model-detail"
href="#eval-package">Rule Packages</a>
</h4>
</div>
<div id="eval-package" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for p in model.eval_packages.all %}
<a class="list-group-item" href="{{ p.url }}">{{ p.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Model Status -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="model-status-link" data-toggle="collapse" data-parent="#model-detail"
href="#model-status">Model Status</a>
</h4>
</div>
<div id="model-status" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ model.status }}
</div>
</div>
{% endif %}
<!-- Predict Panel -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
href="#predict-smiles">Predict</a>
</h4>
</div>
</div>
<script>
$(function() {
if(!($('#sg-chart').length > 0)) {
return;
}
console.log($('#sg-chart').length)
//$('#sg-curve-plotdiv').empty();
<div id="predict-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<div class="input-group">
<input id="smiles-to-predict" type="text" class="form-control"
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
</span>
</div>
<div id="loading"></div>
<div id="predictResultTable"></div>
</div>
</div>
<!-- End Predict Panel -->
{% if model.model_status == 'FINISHED' %}
<!-- Single Gen Curve Panel -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
href="#sg-curve">Precision Recall Curve</a>
</h4>
</div>
<div id="sg-curve" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<!-- Center container contents -->
<div class="container" style="display: flex;justify-content: center;">
<div id="sg-curve-plotdiv" class="chart">
<div id="sg-chart"></div>
</div>
</div>
var x = ['Recall'];
var y = ['Precision'];
var thres = ['threshold'];
</div>
</div>
<script>
$(function () {
if (!($('#sg-chart').length > 0)) {
return;
}
// Compare function for the given array
function compare(a, b) {
if (a.threshold < b.threshold)
var x = ['Recall'];
var y = ['Precision'];
var thres = ['threshold'];
// Compare function for the given array
function compare(a, b) {
if (a.threshold < b.threshold)
return -1;
else if (a.threshold > b.threshold)
return 1;
else
return 0;
}
function getIndexForValue(data, val, val_name) {
for (var idx in data) {
if (data[idx][val_name] == val) {
return idx;
}
}
return -1;
else if (a.threshold > b.threshold)
return 1;
else
return 0;
}
function getIndexForValue(data, val, val_name) {
for(var idx in data) {
if(data[idx][val_name] == val) {
return idx;
}
}
return -1;
}
var data = {{ model.pr_curve|safe }}
var dataLength = Object.keys(data).length;
data.sort(compare);
var data = {{ model.pr_curve|safe }}
var dataLength = Object.keys(data).length;
data.sort(compare);
for (var idx in data) {
var d = data[idx];
x.push(d.recall);
y.push(d.precision);
thres.push(d.threshold);
}
var chart = c3.generate({
bindto: '#sg-chart',
data: {
onclick: function (d, e) {
var idx = d.index;
var thresh = data[dataLength-idx-1].threshold;
for (var idx in data) {
var d = data[idx];
x.push(d.recall);
y.push(d.precision);
thres.push(d.threshold);
}
var chart = c3.generate({
bindto: '#sg-chart',
data: {
onclick: function (d, e) {
var idx = d.index;
var thresh = data[dataLength - idx - 1].threshold;
//onclick(thresh)
//onclick(thresh)
},
x: 'Recall',
y: 'Precision',
columns: [
x,
y,
//thres
]
},
size: {
height: 400, // TODO: Make variable to current modal width
width: 480
},
axis: {
x: {
max: 1,
min: 0,
label: 'Recall',
padding: 0,
tick: {
fit: true,
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
}
},
y: {
max: 1,
min: 0,
label: 'Precision',
padding: 0,
tick: {
fit: true,
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
}
}
},
point: {
r: 4
},
tooltip: {
format: {
title: function (recall) {
idx = getIndexForValue(data, recall, "recall");
if(idx != -1) {
return "Threshold: " + data[idx].threshold;
}
return "";
},
value: function (precision, ratio, id) {
return undefined;
x: 'Recall',
y: 'Precision',
columns: [
x,
y,
//thres
]
},
size: {
height: 400, // TODO: Make variable to current modal width
width: 480
},
axis: {
x: {
max: 1,
min: 0,
label: 'Recall',
padding: 0,
tick: {
fit: true,
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
}
},
y: {
max: 1,
min: 0,
label: 'Precision',
padding: 0,
tick: {
fit: true,
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
}
}
},
point: {
r: 4
},
tooltip: {
format: {
title: function (recall) {
idx = getIndexForValue(data, recall, "recall");
if (idx != -1) {
return "Threshold: " + data[idx].threshold;
}
return "";
},
value: function (precision, ratio, id) {
return undefined;
}
}
},
zoom: {
enabled: true
}
},
zoom: {
enabled: true
}
});
});
});
</script>
<!-- End Single Gen Curve Panel -->
{% endif %}
</script>
<!-- End Single Gen Curve Panel -->
{% endif %}
</div>
</div>
</div>
<script>
<script>
function handleResponse(data) {
res = "<table class='table table-striped'>"
res += "<thead>"
res += "<th scope='col'>#</th>"
function handleResponse(data) {
res = "<table class='table table-striped'>"
res += "<thead>"
res += "<th scope='col'>#</th>"
columns = ['products', 'image', 'probability', 'btrule']
columns = ['products', 'image', 'probability', 'btrule']
for(col in columns) {
res += "<th scope='col'>" + columns[col] + "</th>"
}
res += "</thead>"
res += "<tbody>"
var cnt = 1;
for(transformation in data) {
res += "<tr>"
res += "<th scope='row'>" + cnt + "</th>"
res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
if (data[transformation]['btrule'] != null) {
res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
} else {
res += "<th scope='row'>N/A</th>"
}
res += "</tr>"
cnt += 1;
}
res += "</tbody>"
res += "</table>"
$("#predictResultTable").append(res);
}
function clear() {
$("#predictResultTable").removeClass("alert alert-danger");
$("#predictResultTable").empty();
}
if($('#predict-button').length > 0) {
$("#predict-button").on("click", function(e) {
e.preventDefault();
data = {
"smiles": $("#smiles-to-predict").val(),
"classify": "ILikeCats!"
for (col in columns) {
res += "<th scope='col'>" + columns[col] + "</th>"
}
clear();
res += "</thead>"
res += "<tbody>"
var cnt = 1;
for (transformation in data) {
res += "<tr>"
res += "<th scope='row'>" + cnt + "</th>"
res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
if (data[transformation]['btrule'] != null) {
res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
} else {
res += "<th scope='row'>N/A</th>"
}
res += "</tr>"
cnt += 1;
}
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
$.ajax({
type : 'get',
data : data,
url : '',
success: function(data, textStatus) {
try {
$("#loading").empty();
handleResponse(data);
} catch (error) {
console.log("Error");
res += "</tbody>"
res += "</table>"
$("#predictResultTable").append(res);
}
function clear() {
$("#predictResultTable").removeClass("alert alert-danger");
$("#predictResultTable").empty();
}
if ($('#predict-button').length > 0) {
$("#predict-button").on("click", function (e) {
e.preventDefault();
data = {
"smiles": $("#smiles-to-predict").val(),
"classify": "ILikeCats!"
}
clear();
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
$.ajax({
type: 'get',
data: data,
url: '',
success: function (data, textStatus) {
try {
$("#loading").empty();
handleResponse(data);
} catch (error) {
console.log("Error");
$("#loading").empty();
$("#predictResultTable").addClass("alert alert-danger");
$("#predictResultTable").append("Error while processing request :/");
}
},
error: function (jqXHR, textStatus, errorThrown) {
$("#loading").empty();
$("#predictResultTable").addClass("alert alert-danger");
$("#predictResultTable").append("Error while processing request :/");
}
},
error : function(jqXHR, textStatus, errorThrown) {
$("#loading").empty();
$("#predictResultTable").addClass("alert alert-danger");
$("#predictResultTable").append("Error while processing request :/");
}
});
});
});
}
</script>
}
</script>
{% endblock content %}

75
templates/objects/node.html Normal file
View File

@ -0,0 +1,75 @@
{% extends "framework.html" %}
{% block content %}
{% block action_modals %}
{% include "modals/objects/edit_node_modal.html" %}
{% include "modals/objects/delete_node_modal.html" %}
{% endblock action_modals %}
<div class="panel-group" id="node-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ node.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/node.html" %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
The underlying structure can be found <a href="{{ node.default_node_label.url }}">here</a>.
</div>
<!-- Description -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="node-desc-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-desc">Description</a>
</h4>
</div>
<div id="node-desc" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ node.description }}
</div>
</div>
<!-- Image -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="node-image-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-image">Image Representation</a>
</h4>
</div>
<div id="node-image" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ node.default_node_label.as_svg|safe }}
</div>
</div>
</div>
<!-- SMILES -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="node-smiles-link" data-toggle="collapse" data-parent="#node-detail"
href="#node-smiles">SMILES Representation</a>
</h4>
</div>
<div id="node-smiles" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{{ node.default_node_label.smiles }}
</div>
</div>
</div>
</div>
{% endblock content %}

2
templates/objects/package.html
View File

@ -14,7 +14,7 @@
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ package.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span

265
templates/objects/pathway.html
View File

@ -1,113 +1,182 @@
{% extends "framework.html" %}
{% block content %}
{% load static %}
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
svg { width: 100%; height: 600px; color: red;}
.link { stroke: #999; stroke-opacity: 0.6; marker-end: url(#arrow); }
.link_no_arrow { stroke: #999; stroke-opacity: 0.6; }
.node image { cursor: pointer; }
.node circle { fill: lightblue; stroke: steelblue; stroke-width: 1.5px; }
.highlighted { stroke: red; stroke-width: 3px; }
.tooltip { position: absolute; background: lightgrey; padding: 5px; border-radius: 5px; visibility: hidden; opacity: 1}
</style>
<script src="{% static 'js/pw.js' %}"></script>
{% load static %}
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
svg {
width: 100%;
height: 600px;
color: red;
}
<p></p>
.link {
stroke: #999;
stroke-opacity: 0.6;
marker-end: url(#arrow);
}
<div class="panel-group" id="pwAccordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ pathway.name }}
</div>
</div>
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="vizLink" data-toggle="collapse" data-parent="#pwAccordion" href="#viz">
Graphical Representation
</a>
</h4>
</div>
<div id="viz" class="panel-collapse collapse in">
<nav role="navigation" class="navbar navbar-default" style="margin: 0;">
<div class="navbar-header">
.link_no_arrow {
stroke: #999;
stroke-opacity: 0.6;
}
.node image {
cursor: pointer;
}
.node circle {
fill: lightblue;
stroke: steelblue;
stroke-width: 1.5px;
}
.highlighted {
stroke: red;
stroke-width: 3px;
}
.tooltip {
position: absolute;
background: lightgrey;
padding: 5px;
border-radius: 5px;
visibility: hidden;
opacity: 1
}
</style>
<script src="{% static 'js/pw.js' %}"></script>
{% block action_modals %}
{% include "modals/objects/add_pathway_node_modal.html" %}
{% include "modals/objects/add_pathway_edge_modal.html" %}
{% include "modals/objects/edit_pathway_modal.html" %}
{% include "modals/objects/delete_pathway_node_modal.html" %}
{% include "modals/objects/delete_pathway_edge_modal.html" %}
{% include "modals/objects/delete_pathway_modal.html" %}
{% endblock action_modals %}
<p></p>
<div id="pwcontent">
<div class="panel-group" id="pwAccordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ pathway.name }}
</div>
</div>
<div id="editbarCollapse" class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="dropdown requiresWritePerm">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
<span class="glyphicon glyphicon-edit"></span>
Edit
<span class="caret"></span></a>
<ul id="editingList" class="dropdown-menu">
<li>
<a role="button" data-toggle="modal" id="showCompoundNames">
<span class="glyphicon glyphicon-eye-open"></span> Show Compound Names</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
<span class="glyphicon glyphicon-fullscreen"></span>Fullscreen
</a>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip" id="status"
data-original-title="" title="" data-content="Pathway prediction complete."><span
class="glyphicon glyphicon-ok"></span></button>
&nbsp;
</li>
</ul>
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="vizLink" data-toggle="collapse" data-parent="#pwAccordion" href="#viz">
Graphical Representation
</a>
</h4>
</div>
<div id="viz" class="panel-collapse collapse in">
<nav role="navigation" class="navbar navbar-default" style="margin: 0;">
<div class="navbar-header">
</div>
<div id="editbarCollapse" class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="dropdown requiresWritePerm">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">
<span class="glyphicon glyphicon-edit"></span>
Edit
<span class="caret"></span></a>
<ul id="editingList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/pathway.html" %}
{% endblock %}
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
<span class="glyphicon glyphicon-fullscreen"></span>
Fullscreen
</a>
</li>
<li>
{% if pathway.completed %}
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
id="status" data-original-title="" title=""
data-content="Pathway prediction complete.">
<span class="glyphicon glyphicon-ok"></span>
</button>
{% elif pathway.failed %}
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
id="status" data-original-title="" title=""
data-content="Pathway prediction failed.">
<span class="glyphicon glyphicon-remove"></span>
</button>
{% else %}
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
id="status" data-original-title="" title=""
data-content="Pathway prediction running.">
<img height="20" src="{% static '/images/wait.gif' %}">
</button>
{% endif %}
&nbsp;
</li>
</ul>
</div>
</nav>
<div id="vizdiv">
<svg width="2000" height="2000">
{% if debug %}
<rect width="100%" height="100%" fill="aliceblue"/>
{% endif %}
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
</marker>
</defs>
<g id="zoomable"></g>
</svg>
<div id="tooltip" class="tooltip"></div>
</div>
</div>
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="DescriptionLink" data-toggle="collapse" data-parent="#pathwayAccordion"
href="#Description">Description</a></h4>
</div>
<div id="Description" class="panel-collapse collapse in">
<div class="panel-body list-group-item" id="DescriptionContent">
{{ pathway.description | safe }}
</div>
</div>
</nav>
<div id="vizdiv">
<svg width="2000" height="2000">
{% if debug %}
<rect width="100%" height="100%" fill="aliceblue"/>
{% endif %}
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
</marker>
</defs>
<g id="zoomable"></g>
</svg>
<div id="tooltip" class="tooltip"></div>
</div>
</div>
<script>
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="DescriptionLink" data-toggle="collapse" data-parent="#pathwayAccordion"
href="#Description">Description</a></h4>
</div>
<div id="Description" class="panel-collapse collapse in">
<div class="panel-body list-group-item" id="DescriptionContent">
{{ pathway.description | safe }}
</div>
</div>
</div>
<script>
function goFullscreen(id) {
var element = document.getElementById(id);
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
function transformReferences(text) {
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
}
function transformReferences(text) {
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
}
pathway = {{ pathway.d3_json | safe }};
pathway = {{ pathway.d3_json | safe }};
$(function() {
draw(pathway, 'vizdiv');
// TODO fix somewhere else...
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
$('#DescriptionContent').html(newDesc);
});
$(function () {
draw(pathway, 'vizdiv');
// TODO fix somewhere else...
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
$('#DescriptionContent').html(newDesc);
});
</script>
</script>
{% endblock content %}

199
templates/objects/reaction.html
View File

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

2
templates/objects/scenario.html
View File

@ -10,7 +10,7 @@
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ scenario.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span

317
templates/objects/simple_rule.html
View File

@ -2,173 +2,184 @@
{% block content %}
{% block action_modals %}
{% include "modals/objects/edit_rule_modal.html" %}
{% endblock action_modals %}
{% block action_modals %}
{% include "modals/objects/edit_rule_modal.html" %}
{% endblock action_modals %}
<div class="panel-group" id="rule-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ rule.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/rule.html" %}
{% endblock %}
</ul>
</div>
</div>
<div class="panel-body">
<p>
{{ rule.description }}
</p>
</div>
<!-- Representation -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-image-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-image">Image Representation</a>
</h4>
</div>
<div id="rule-image" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ rule.as_svg|safe }}
<div class="panel-group" id="rule-detail">
<div class="panel panel-default">
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ rule.name }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
style="padding-right:1em"></span></a>
<ul id="actionsList" class="dropdown-menu">
{% block actions %}
{% include "actions/objects/rule.html" %}
{% endblock %}
</ul>
</div>
</div>
</div>
<div class="panel-body">
<p>
{{ rule.description }}
</p>
</div>
<!-- SMIRKS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-smirks-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-smirks">SMIRKS Representation</a>
</h4>
</div>
<div id="rule-smirks" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.smirks }} </p>
<!-- Representation -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-image-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-image">Image Representation</a>
</h4>
</div>
<div id="rule-image" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<div id="image-div" align="center">
{{ rule.as_svg|safe }}
</div>
</div>
</div>
</div>
<!-- Reactants SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reactants-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reactants-smarts">Reactant SMARTS</a>
</h4>
</div>
<div id="rule-reactants-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.reactants_smarts }} </p>
<!-- SMIRKS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-smirks-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-smirks">SMIRKS Representation</a>
</h4>
</div>
<div id="rule-smirks" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.smirks }} </p>
</div>
</div>
</div>
<!-- Reactant Filter SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reactant-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reactant-filter-smarts">Reactant Filter SMARTS</a>
</h4>
</div>
<div id="rule-reactant-filter-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.reactant_filter_smarts }} </p>
<!-- Reactants SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reactants-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reactants-smarts">Reactant SMARTS</a>
</h4>
</div>
<div id="rule-reactants-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.reactants_smarts }} </p>
</div>
</div>
</div>
<!-- Products SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-products-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-products-smarts">Reactant SMARTS</a>
</h4>
</div>
<div id="rule-products-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.products_smarts }} </p>
</div>
</div>
<!-- Reactant Filter SMARTS -->
{% if rule.reactant_filter_smarts %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reactant-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reactant-filter-smarts">Reactant Filter SMARTS</a>
</h4>
</div>
<div id="rule-reactant-filter-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.reactant_filter_smarts }} </p>
</div>
</div>
{% endif %}
<!-- Product Filter SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-product-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-product-filter-smarts">Product Filter SMARTS</a>
</h4>
</div>
<div id="rule-product-filter-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.product_filter_smarts }} </p>
<!-- Products SMARTS -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-products-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-products-smarts">Reactant SMARTS</a>
</h4>
</div>
<div id="rule-products-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.products_smarts }} </p>
</div>
</div>
</div>
<!-- Included in Composite Rules -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-composite-rule-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-composite-rule">Included in Composite Rules</a>
</h4>
</div>
<div id="rule-composite-rule" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for cr in rule.parallelrule_set.all %}
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name }}</a>
{% endfor %}
</div>
</div>
<!-- Scenarios -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-scenario">Scenarios</a>
</h4>
</div>
<div id="rule-scenario" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for s in rule.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name }}</a>
{% endfor %}
</div>
</div>
<!-- Product Filter SMARTS -->
{% if rule.product_filter_smarts %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-product-filter-smarts-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-product-filter-smarts">Product Filter SMARTS</a>
</h4>
</div>
<div id="rule-product-filter-smarts" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
<p> {{ rule.product_filter_smarts }} </p>
</div>
</div>
{% endif %}
<!-- Reactions -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reaction-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reaction">Reactions</a>
</h4>
</div>
<div id="rule-reaction" class="panel-collapse collapse">
<div class="panel-body list-group-item">
{% for r in rule.related_reactions %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
{% endfor %}
</div>
</div>
<!-- Pathways -->
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-pathway-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-pathway">Pathways</a>
</h4>
</div>
<div id="rule-pathway" class="panel-collapse collapse">
<div class="panel-body list-group-item">
{% for r in rule.related_pathways %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
{% endfor %}
</div>
</div>
<!-- Included in Composite Rules -->
{% if rule.parallelrule_set.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-composite-rule-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-composite-rule">Included in Composite Rules</a>
</h4>
</div>
<div id="rule-composite-rule" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for cr in rule.parallelrule_set.all %}
<a class="list-group-item" href="{{ cr.url }}">{{ cr.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Scenarios -->
{% if rule.scenarios.all %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-scenario">Scenarios</a>
</h4>
</div>
<div id="rule-scenario" class="panel-collapse collapse in">
<div class="panel-body list-group-item">
{% for s in rule.scenarios.all %}
<a class="list-group-item" href="{{ s.url }}">{{ s.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Reactions -->
{% if rule.related_reactions %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-reaction-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-reaction">Reactions</a>
</h4>
</div>
<div id="rule-reaction" class="panel-collapse collapse">
<div class="panel-body list-group-item">
{% for r in rule.related_reactions %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Pathways -->
{% if rule.related_pathways %}
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
<h4 class="panel-title">
<a id="rule-pathway-link" data-toggle="collapse" data-parent="#rule-detail"
href="#rule-pathway">Pathways</a>
</h4>
</div>
<div id="rule-pathway" class="panel-collapse collapse">
<div class="panel-body list-group-item">
{% for r in rule.related_pathways %}
<a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock content %}

2
templates/objects/user.html
View File

@ -15,7 +15,7 @@
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
{{ user.username }}
<div id="actionsButton"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><span
class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span