forked from enviPath/enviPy
App Domain Pathway Prediction (#47)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#47
This commit is contained in:
@ -269,141 +269,6 @@
|
||||
|
||||
<script>
|
||||
|
||||
function handleAssessmentResponse(data) {
|
||||
var inside_app_domain = "<a class='list-group-item'>This compound is " + (data["assessment"]["inside_app_domain"] ? "inside" : "outside") + " the Applicability Domain derived from the chemical (PCA) space constructed using the training data." + "</a>";
|
||||
var functionalGroupsImgSrc = "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
|
||||
var reactivityCentersImgSrc = "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
|
||||
|
||||
tpl = `<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="app-domain-assessment-functional-groups-link" data-toggle="collapse" data-parent="#app-domain-assessment" href="#app-domain-assessment-functional-groups">Functional Groups Covered by Model</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="app-domain-assessment-functional-groups" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
${inside_app_domain}
|
||||
<p></p>
|
||||
<div id="image-div" align="center">
|
||||
${functionalGroupsImgSrc}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="app-domain-assessment-reactivity-centers-link" data-toggle="collapse" data-parent="#app-domain-assessment" href="#app-domain-assessment-reactivity-centers">Reactivity Centers</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="app-domain-assessment-reactivity-centers" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
<div id="image-div" align="center">
|
||||
${reactivityCentersImgSrc}
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
var transformations = '';
|
||||
|
||||
for (t in data['assessment']['transformations']) {
|
||||
transObj = data['assessment']['transformations'][t];
|
||||
var neighbors = '';
|
||||
for (n in transObj['neighbors']) {
|
||||
neighObj = transObj['neighbors'][n];
|
||||
var neighImg = "<img width='100%' src='" + transObj['rule']['url'] + "?smiles=" + encodeURIComponent(neighObj['smiles']) + "'>";
|
||||
var objLink = `<a class='list-group-item' href="${neighObj['url']}">${neighObj['name']}</a>`
|
||||
var neighPredProb = "<a class='list-group-item'>Predicted probability: " + neighObj['probability'].toFixed(2) + "</a>";
|
||||
|
||||
var pwLinks = '';
|
||||
for (pw in neighObj['related_pathways']) {
|
||||
var pwObj = neighObj['related_pathways'][pw];
|
||||
pwLinks += "<a class='list-group-item' href=" + pwObj['url'] + ">" + pwObj['name'] + "</a>";
|
||||
}
|
||||
|
||||
var expPathways = `
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="transformation-${t}-neighbor-${n}-exp-pathway-link" data-toggle="collapse" data-parent="#transformation-${t}-neighbor-${n}" href="#transformation-${t}-neighbor-${n}-exp-pathway">Experimental Pathways</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="transformation-${t}-neighbor-${n}-exp-pathway" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
${pwLinks}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
if (pwLinks === '') {
|
||||
expPathways = ''
|
||||
}
|
||||
|
||||
neighbors += `
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="transformation-${t}-neighbor-${n}-link" data-toggle="collapse" data-parent="#transformation-${t}" href="#transformation-${t}-neighbor-${n}">Analog Transformation on ${neighObj['name']}</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="transformation-${t}-neighbor-${n}" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
${objLink}
|
||||
${neighPredProb}
|
||||
${expPathways}
|
||||
<p></p>
|
||||
<div id="image-div" align="center">
|
||||
${neighImg}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
var panelName = null;
|
||||
var objLink = null;
|
||||
if (transObj['is_predicted']) {
|
||||
panelName = `Predicted Transformation by ${transObj['rule']['name']}`;
|
||||
objLink = `<a class='list-group-item' href="${transObj['edge']['url']}">${transObj['edge']['name']}</a>`
|
||||
} else {
|
||||
panelName = `Potential Transformation by applying ${transObj['rule']['name']}`;
|
||||
objLink = `<a class='list-group-item' href="${transObj['rule']['url']}">${transObj['rule']['name']}</a>`
|
||||
}
|
||||
|
||||
var predProb = "<a class='list-group-item'>Predicted probability: " + transObj['probability'].toFixed(2) + "</a>";
|
||||
var timesTriggered = "<a class='list-group-item'>This rule has triggered " + transObj['times_triggered'] + " times in the training set</a>";
|
||||
var reliability = "<a class='list-group-item'>Reliability: " + transObj['reliability'].toFixed(2) + " (" + (transObj['reliability'] > data['ad_params']['reliability_threshold'] ? ">" : "<") + " Reliability Threshold of " + data['ad_params']['reliability_threshold'] + ") </a>";
|
||||
var localCompatibility = "<a class='list-group-item'>Local Compatibility: " + transObj['local_compatibility'].toFixed(2) + " (" + (transObj['local_compatibility'] > data['ad_params']['local_compatibilty_threshold'] ? ">" : "<") + " Local Compatibility Threshold of " + data['ad_params']['local_compatibilty_threshold'] + ")</a>";
|
||||
|
||||
var transImg = "<img width='100%' src='" + transObj['rule']['url'] + "?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
|
||||
|
||||
var transformation = `
|
||||
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
||||
<h4 class="panel-title">
|
||||
<a id="transformation-${t}-link" data-toggle="collapse" data-parent="#transformation-${t}" href="#transformation-${t}">${panelName}</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="transformation-${t}" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
${objLink}
|
||||
${predProb}
|
||||
${timesTriggered}
|
||||
${reliability}
|
||||
${localCompatibility}
|
||||
<p></p>
|
||||
<div id="image-div" align="center">
|
||||
${transImg}
|
||||
</div>
|
||||
<p></p>
|
||||
${neighbors}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
transformations += transformation;
|
||||
}
|
||||
|
||||
res = tpl + transformations;
|
||||
|
||||
$("#appDomainAssessmentResultTable").append(res);
|
||||
|
||||
}
|
||||
|
||||
function handlePredictionResponse(data) {
|
||||
res = "<table class='table table-striped'>"
|
||||
res += "<thead>"
|
||||
@ -498,7 +363,7 @@
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#appDomainLoading").empty();
|
||||
handleAssessmentResponse(data);
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
console.log("Error");
|
||||
|
||||
@ -69,7 +69,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if app_domain_assessment_data %}
|
||||
<div id="appDomainAssessmentResultTable"></div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
handleAssessmentResponse("{% url 'depict' %}", {{ app_domain_assessment_data|safe }})
|
||||
})
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
@ -4,16 +4,22 @@
|
||||
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg {
|
||||
#vizdiv {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#pwsvg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.link {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
marker-end: url(#arrow);
|
||||
//marker-end: url(#arrow);
|
||||
}
|
||||
|
||||
.link_no_arrow {
|
||||
@ -31,6 +37,31 @@
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.inside_app_domain {
|
||||
fill: green;
|
||||
stroke: green;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.outside_app_domain {
|
||||
fill: red;
|
||||
stroke: red;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.passes_app_domain {
|
||||
stroke: green;
|
||||
stroke-width: 1.5px;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
|
||||
.fails_app_domain {
|
||||
stroke: red;
|
||||
stroke-width: 1.5px;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
.highlighted {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
@ -80,8 +111,7 @@
|
||||
<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">
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
Edit
|
||||
<span class="caret"></span></a>
|
||||
@ -91,11 +121,26 @@
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</li>
|
||||
{% if pathway.setting.model.app_domain %}
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="glyphicon glyphicon-eye-open"></span>
|
||||
View
|
||||
<span class="caret"></span></a>
|
||||
<ul id="editingList" class="dropdown-menu">
|
||||
<li>
|
||||
<a class="button" id="app-domain-toggle-button">
|
||||
<i id="app-domain-toggle-button" class="glyphicon glyphicon-eye-open"></i> App Domain View</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
|
||||
<a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
|
||||
<span class="glyphicon glyphicon-fullscreen"></span>
|
||||
Fullscreen
|
||||
</a>
|
||||
@ -126,16 +171,24 @@
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div id="vizdiv">
|
||||
<svg width="2000" height="2000">
|
||||
<div id="vizdiv" >
|
||||
<svg id="pwsvg">
|
||||
{% 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">
|
||||
orient="auto-start-reverse" markerUnits="userSpaceOnUse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
<marker id="arrow_passes_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse" markerUnits="userSpaceOnUse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="green"/>
|
||||
</marker>
|
||||
<marker id="arrow_fails_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse" markerUnits="userSpaceOnUse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="red"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
@ -160,7 +213,7 @@
|
||||
<a id="pathwaySettingLink" data-toggle="collapse" data-parent="#pathwayAccordion"
|
||||
href="#pathwaySetting">Setting</a></h4>
|
||||
</div>
|
||||
<div id="pathwaySetting" class="panel-collapse collapse in">
|
||||
<div id="pathwaySetting" class="panel-collapse collapse">
|
||||
<div class="panel-body list-group-item" id="pathwaySettingContent">
|
||||
<table class="table table-bordered table-hover">
|
||||
<tr style="background-color: rgba(0, 0, 0, 0.08);">
|
||||
@ -246,6 +299,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Globla switch for app domain view
|
||||
var appDomainViewEnabled = false;
|
||||
|
||||
function goFullscreen(id) {
|
||||
var element = document.getElementById(id);
|
||||
@ -267,6 +322,51 @@
|
||||
// TODO fix somewhere else...
|
||||
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
||||
$('#DescriptionContent').html(newDesc);
|
||||
|
||||
|
||||
$('#app-domain-toggle-button').on('click', function () {
|
||||
// glyphicon glyphicon-eye-close
|
||||
// glyphicon glyphicon-eye-open
|
||||
appDomainViewEnabled = !appDomainViewEnabled;
|
||||
|
||||
if (appDomainViewEnabled) {
|
||||
$('#app-domain-toggle-button > i').removeClass('glyphicon-eye-open');
|
||||
$('#app-domain-toggle-button > i').addClass('glyphicon-eye-close');
|
||||
nodes.forEach((x) => {
|
||||
if(x.app_domain) {
|
||||
if (x.app_domain.inside_app_domain) {
|
||||
d3.select(x.el).select("circle").classed("inside_app_domain", true);
|
||||
} else {
|
||||
d3.select(x.el).select("circle").classed("outside_app_domain", true);
|
||||
}
|
||||
}
|
||||
});
|
||||
links.forEach((x) => {
|
||||
if(x.app_domain) {
|
||||
if (x.app_domain.passes_app_domain) {
|
||||
d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_passes_app_domain)");
|
||||
d3.select(x.el).classed("passes_app_domain", true);
|
||||
} else {
|
||||
d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_fails_app_domain)");
|
||||
d3.select(x.el).classed("fails_app_domain", true);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('#app-domain-toggle-button > i').removeClass('glyphicon-eye-close');
|
||||
$('#app-domain-toggle-button > i').addClass('glyphicon-eye-open');
|
||||
nodes.forEach((x) => {
|
||||
d3.select(x.el).select("circle").classed("inside_app_domain", false);
|
||||
d3.select(x.el).select("circle").classed("outside_app_domain", false);
|
||||
});
|
||||
links.forEach((x) => {
|
||||
d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow)");
|
||||
d3.select(x.el).classed("passes_app_domain", false);
|
||||
d3.select(x.el).classed("fails_app_domain", false);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user