forked from enviPath/enviPy
Enable App Domain Assessment on Model Page (#45)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#45
This commit is contained in:
@ -269,7 +269,142 @@
|
||||
|
||||
<script>
|
||||
|
||||
function handleResponse(data) {
|
||||
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>"
|
||||
res += "<th scope='col'>#</th>"
|
||||
@ -327,7 +462,7 @@
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#predictLoading").empty();
|
||||
handleResponse(data);
|
||||
handlePredictionResponse(data);
|
||||
} catch (error) {
|
||||
console.log("Error");
|
||||
$("#predictLoading").empty();
|
||||
@ -363,6 +498,7 @@
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#appDomainLoading").empty();
|
||||
handleAssessmentResponse(data);
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
console.log("Error");
|
||||
|
||||
Reference in New Issue
Block a user