forked from enviPath/enviPy
3b71184631
Initial bayer app Show Pack Classification Adjusted docker compose to bayer specifics Adjusted Dockerfile for Bayer Adding secret flags to group, add secret pools to packages Adjusted View for Package creation Prep configs, added Package Create Modal wip More on PES wip wip Wip minor PW interactions API PES wip Make Select Widget reflect required make required generallay available Update UI if pathway mode is set to build Added ais circle adjustments Initial Zoom, fix AD Creation wip auth log, bb4g fix missing import Added viz hint if PES is part of reaction Add Edge check for pes flip boolean ... pes Added extra ... In / Out Edges Viz, Submitting Button Text ... Make PES Link clickable Return proper http response instead of error Fixed error return, removed unused options Fix PES Link HTML for other entities Fixed molfile assignment, adjusted Export Package Export/Import cycle highlight Description links implemented non persistent Harmonised proposed field in Json output Added pesLink field to PW Api output PES Fields in API Output removed debug Fix Classification import, Fix PES Deserialization underline pes link in templates Fix alter name/desc for node, make /node /edge funcitonal provide setting link and copy button Implemented Compound Names / Reaction Names View Option Unconnected Nodes Make links thicker, reduce timeout trigger time Show proposed info in popover Pathway Build no stereo removal Include probs in reaction name option viz Detect clicks outside nodes/edges Provide proper Error Pages View Package Perm wip sync Auth log auth log leftovers ... secret packs viz auth log for api model stats Fix Package Adjustment Adjust Group Auth Log Fix Secret image size in Navbar leftover ... minor
469 lines
16 KiB
HTML
469 lines
16 KiB
HTML
{% extends "objects/model/_model_base.html" %}
|
|
{% load static %}
|
|
{% load envipytags %}
|
|
|
|
{% block libraries %}
|
|
<!-- 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"
|
|
/>
|
|
{% endblock %}
|
|
|
|
{% block usemodel %}
|
|
{% if model.ready_for_prediction %}
|
|
<!-- Predict Panel -->
|
|
<div class="collapse-arrow bg-base-200 collapse">
|
|
<input type="checkbox" checked />
|
|
<div class="collapse-title text-xl font-medium" id="predictTitle">
|
|
Predict
|
|
</div>
|
|
<div class="collapse-content">
|
|
<div class="form-control">
|
|
<div class="join w-full">
|
|
<input
|
|
id="smiles-to-predict"
|
|
type="text"
|
|
class="input input-bordered join-item grow"
|
|
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
|
|
/>
|
|
<button
|
|
class="btn btn-primary join-item"
|
|
type="button"
|
|
id="predict-button"
|
|
>
|
|
Predict!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="predictLoading" class="mt-2 flex hidden justify-center">
|
|
<div class="h-8 w-8">
|
|
{% include "components/loading-spinner.html" %}
|
|
</div>
|
|
</div>
|
|
<div id="predictResultTable" class="mt-4"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if model.ready_for_prediction and model.app_domain %}
|
|
<!-- App Domain -->
|
|
<div class="collapse-arrow bg-base-200 collapse">
|
|
<input type="checkbox" checked />
|
|
<div class="collapse-title text-xl font-medium">
|
|
Applicability Domain Assessment
|
|
</div>
|
|
<div class="collapse-content">
|
|
<div class="form-control">
|
|
<div class="join w-full">
|
|
<input
|
|
id="smiles-to-assess"
|
|
type="text"
|
|
class="input input-bordered join-item grow"
|
|
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
|
|
/>
|
|
<button
|
|
class="btn btn-primary join-item"
|
|
type="button"
|
|
id="assess-button"
|
|
>
|
|
Assess!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="appDomainLoading" class="mt-2 flex hidden justify-center">
|
|
<div class="h-8 w-8">
|
|
{% include "components/loading-spinner.html" %}
|
|
</div>
|
|
</div>
|
|
<div id="appDomainAssessmentResultTable" class="mt-4"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
function handlePredictionResponse(data) {
|
|
let stereo = data["stereo"];
|
|
data = data["pred"];
|
|
let res = "";
|
|
if (stereo) {
|
|
res +=
|
|
"<span class='alert alert-warning alert-soft'>Removed stereochemistry for prediction</span><br>";
|
|
}
|
|
res += "<table class='table table-zebra'>";
|
|
res += "<thead>";
|
|
res += "<th scope='col'>#</th>";
|
|
|
|
const columns = ["products", "image", "probability", "btrule"];
|
|
|
|
for (const col of columns) {
|
|
res += "<th scope='col'>" + col + "</th>";
|
|
}
|
|
res += "</thead>";
|
|
res += "<tbody>";
|
|
let cnt = 1;
|
|
for (const 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"] +
|
|
"' class='link link-primary'>" +
|
|
data[transformation]["btrule"]["name"] +
|
|
"</a>" +
|
|
"</th>";
|
|
} else {
|
|
res += "<th scope='row'>N/A</th>";
|
|
}
|
|
res += "</tr>";
|
|
cnt += 1;
|
|
}
|
|
|
|
res += "</tbody>";
|
|
res += "</table>";
|
|
const resultTable = document.getElementById("predictResultTable");
|
|
if (resultTable) {
|
|
resultTable.innerHTML = res;
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Show actions button if there are actions
|
|
const actionsButton = document.getElementById("actionsButton");
|
|
const actionsList = actionsButton?.querySelector("ul");
|
|
if (actionsList && actionsList.children.length > 0) {
|
|
actionsButton?.classList.remove("hidden");
|
|
}
|
|
|
|
// Predict button handler
|
|
const predictButton = document.getElementById("predict-button");
|
|
if (predictButton) {
|
|
predictButton.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
clear("predictResultTable");
|
|
|
|
const smilesInput = document.getElementById("smiles-to-predict");
|
|
const smiles = smilesInput ? smilesInput.value.trim() : "";
|
|
|
|
if (smiles === "") {
|
|
const resultTable = document.getElementById("predictResultTable");
|
|
if (resultTable) {
|
|
resultTable.classList.add("alert", "alert-error");
|
|
resultTable.innerHTML =
|
|
"Please enter a SMILES string to predict!";
|
|
}
|
|
return;
|
|
}
|
|
|
|
const loadingEl = document.getElementById("predictLoading");
|
|
if (loadingEl) loadingEl.classList.remove("hidden");
|
|
|
|
const params = new URLSearchParams({
|
|
smiles: smiles,
|
|
classify: "ILikeCats!",
|
|
});
|
|
|
|
fetch("?" + params.toString(), {
|
|
method: "GET",
|
|
headers: {
|
|
"X-CSRFToken":
|
|
document.querySelector("[name=csrf-token]").content,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
return response.json().then((err) => {
|
|
throw err;
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const loadingEl = document.getElementById("predictLoading");
|
|
if (loadingEl) loadingEl.classList.add("hidden");
|
|
handlePredictionResponse(data);
|
|
})
|
|
.catch((error) => {
|
|
const loadingEl = document.getElementById("predictLoading");
|
|
if (loadingEl) loadingEl.classList.add("hidden");
|
|
const resultTable = document.getElementById("predictResultTable");
|
|
if (resultTable) {
|
|
resultTable.classList.add("alert", "alert-error");
|
|
resultTable.innerHTML =
|
|
error.error || "Error while processing response :/";
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Assess button handler
|
|
const assessButton = document.getElementById("assess-button");
|
|
if (assessButton) {
|
|
assessButton.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
clear("appDomainAssessmentResultTable");
|
|
|
|
const smilesInput = document.getElementById("smiles-to-assess");
|
|
const smiles = smilesInput ? smilesInput.value.trim() : "";
|
|
|
|
if (smiles === "") {
|
|
const resultTable = document.getElementById(
|
|
"appDomainAssessmentResultTable",
|
|
);
|
|
if (resultTable) {
|
|
resultTable.classList.add("alert", "alert-error");
|
|
resultTable.innerHTML =
|
|
"Please enter a SMILES string to predict!";
|
|
}
|
|
return;
|
|
}
|
|
|
|
const loadingEl = document.getElementById("appDomainLoading");
|
|
if (loadingEl) loadingEl.classList.remove("hidden");
|
|
|
|
const params = new URLSearchParams({
|
|
smiles: smiles,
|
|
"app-domain-assessment": "ILikeCats!",
|
|
});
|
|
|
|
fetch("?" + params.toString(), {
|
|
method: "GET",
|
|
headers: {
|
|
"X-CSRFToken":
|
|
document.querySelector("[name=csrf-token]").content,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
return response.json().then((err) => {
|
|
throw err;
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const loadingEl = document.getElementById("appDomainLoading");
|
|
if (loadingEl) loadingEl.classList.add("hidden");
|
|
if (typeof handleAssessmentResponse === "function") {
|
|
handleAssessmentResponse("{% url 'depict' %}", data);
|
|
}
|
|
console.log(data);
|
|
})
|
|
.catch((error) => {
|
|
const loadingEl = document.getElementById("appDomainLoading");
|
|
if (loadingEl) loadingEl.classList.add("hidden");
|
|
const resultTable = document.getElementById(
|
|
"appDomainAssessmentResultTable",
|
|
);
|
|
if (resultTable) {
|
|
resultTable.classList.add("alert", "alert-error");
|
|
resultTable.innerHTML =
|
|
error.error || "Error while processing response :/";
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% block evaluation %}
|
|
{# prettier-ignore-start #}
|
|
{% if model.model_status == 'FINISHED' %}
|
|
<!-- Single Gen Curve Panel -->
|
|
<div class="collapse-arrow bg-base-200 collapse">
|
|
<input type="checkbox" checked/>
|
|
<div class="collapse-title text-xl font-medium">
|
|
Precision Recall Curve
|
|
</div>
|
|
<div class="collapse-content">
|
|
<div class="flex justify-center">
|
|
<div id="sg-chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if model.multigen_eval %}
|
|
<div class="collapse-arrow bg-base-200 collapse">
|
|
<input type="checkbox" checked/>
|
|
<div class="collapse-title text-xl font-medium">
|
|
Multi Gen Precision Recall Curve
|
|
</div>
|
|
<div class="collapse-content">
|
|
<div class="flex justify-center">
|
|
<div id="mg-chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Model Statistics Panel -->
|
|
<div class="collapse-arrow bg-base-200 collapse">
|
|
<input type="checkbox" checked />
|
|
<div class="collapse-title text-xl font-medium">Model Statistics for threshold {{ model.threshold }}</div>
|
|
<div class="collapse-content">
|
|
<div class="flex justify-center">
|
|
<div
|
|
id="model-stats"
|
|
class="overflow-x-auto rounded-box shadow-md bg-base-100"
|
|
>
|
|
<table class="table table-fixed w-full">
|
|
<thead class="text-base">
|
|
<tr>
|
|
<th class="w-1/5">Metric</th>
|
|
<th>Single Gen Value</th>
|
|
{% if model.multigen_eval %}
|
|
<th>Multi Gen Value</th>
|
|
{% endif %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for metric, value in model.statistics.items %}
|
|
<tr>
|
|
<td>{{ metric|upper }}</td>
|
|
<td>{{ value.0|floatformat:3 }}</td>
|
|
{% if model.multigen_eval %}
|
|
<td>{{ value.1|floatformat:3 }}</td>
|
|
{% endif %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
<script>
|
|
function makeChart(selector, data) {
|
|
const x = ['Recall'];
|
|
const y = ['Precision'];
|
|
const thres = ['threshold'];
|
|
|
|
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 (const idx in data) {
|
|
if (data[idx][val_name] == val) {
|
|
return idx;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
if (!data || data.length === 0) {
|
|
console.warn('PR curve data is empty');
|
|
return;
|
|
}
|
|
const dataLength = data.length;
|
|
data.sort(compare);
|
|
|
|
for (const idx in data) {
|
|
const d = data[idx];
|
|
x.push(d.recall);
|
|
y.push(d.precision);
|
|
thres.push(d.threshold);
|
|
}
|
|
const chart = c3.generate({
|
|
bindto: selector,
|
|
data: {
|
|
onclick: function (d, e) {
|
|
const idx = d.index;
|
|
const thresh = data[dataLength - idx - 1].threshold;
|
|
},
|
|
x: 'Recall',
|
|
y: 'Precision',
|
|
columns: [
|
|
x,
|
|
y,
|
|
]
|
|
},
|
|
size: {
|
|
height: 400,
|
|
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) {
|
|
const idx = getIndexForValue(data, recall, "recall");
|
|
if (idx != -1) {
|
|
return "Threshold: " + data[idx].threshold;
|
|
}
|
|
return "";
|
|
},
|
|
value: function (precision, ratio, id) {
|
|
return undefined;
|
|
}
|
|
}
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
{% if model.model_status == 'FINISHED' %}
|
|
// Precision Recall Curve
|
|
makeChart('#sg-chart', {{ model.pr_curve|safe }});
|
|
{% if model.multigen_eval %}
|
|
// Multi Gen Precision Recall Curve
|
|
makeChart('#mg-chart', {{ model.mg_pr_curve|safe }});
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
});
|
|
</script>
|
|
{# prettier-ignore-end #}
|
|
{% endblock %}
|