forked from enviPath/enviPy
[Feature] Modern UI roll out (#236)
This PR moves all the collection pages into the new UI in a rough push. I did not put the same amount of care into these as into search, index, and predict. ## Major changes - All modals are now migrated to a state based alpine.js implementation. - jQuery is no longer present in the base layout; ajax is replace by native fetch api - most of the pps.js is now obsolte (as I understand it; the code is not referenced any more @jebus please double check) - in-memory pagination for large result lists (set to 50; we can make that configurable later; performance degrades at around 1k) stukk a bit rough tracked in #235 ## Minor things - Sarch and index also use alpine now - The loading spinner is now CSS animated (not sure if it currently gets correctly called) ## Not done - Ihave not even cheked the admin pages. Not sure If these need migrations - The temporary migration pages still use the old template. Not sure what is supposed to happen with those? @jebus ## What I did to test - opend all pages in browse, and user ; plus all pages reachable from there. - Interacted and tested the functionality of each modal superfically with exception of the API key modal (no functional test). --- This PR is massive sorry for that; just did not want to push half-brokenn state. @jebus @liambrydon I would be glad if you could click around and try to break it :) Finally closes #133 Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#236 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
{% extends "framework.html" %}
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
{% load envipytags %}
|
||||
{% block content %}
|
||||
@ -18,509 +18,458 @@
|
||||
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|safe }}
|
||||
<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 %}
|
||||
<div class="space-y-2 p-4">
|
||||
<!-- Header Section -->
|
||||
<div class="card bg-base-100">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="card-title text-2xl">{{ model.name }}</h2>
|
||||
<div id="actionsButton" class="dropdown dropdown-end hidden">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-wrench"
|
||||
>
|
||||
<path
|
||||
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
|
||||
/>
|
||||
</svg>
|
||||
Actions
|
||||
</div>
|
||||
<ul
|
||||
tabindex="-1"
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
|
||||
>
|
||||
{% block actions %}
|
||||
{% include "actions/objects/model.html" %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2">{{ model.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if model|classname == 'MLRelativeReasoning' or model|classname == 'RuleBasedRelativeReasoning' %}
|
||||
<!-- Rule Packages -->
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">Rule Packages</div>
|
||||
<div class="collapse-content">
|
||||
<ul class="menu bg-base-100 rounded-box w-full">
|
||||
{% for p in model.rule_packages.all %}
|
||||
<li>
|
||||
<a href="{{ p.url }}" class="hover:bg-base-200">{{ p.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>{{ model.description|safe }}</p>
|
||||
</div>
|
||||
{% if model|classname == 'MLRelativeReasoning' or model|classname == 'RuleBasedRelativeReasoning' %}
|
||||
<!-- 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 in collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
{% for p in model.rule_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}"
|
||||
>{{ p.name|safe }}</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"
|
||||
>Data Packages</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="reaction-package" class="panel-collapse in collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
<!-- Reaction Packages -->
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">Reaction Packages</div>
|
||||
<div class="collapse-content">
|
||||
<ul class="menu bg-base-100 rounded-box w-full">
|
||||
{% for p in model.data_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}"
|
||||
>{{ p.name|safe }}</a
|
||||
>
|
||||
<li>
|
||||
<a href="{{ p.url }}" class="hover:bg-base-200">{{ p.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</ul>
|
||||
</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"
|
||||
>Evaluation Packages</a
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="eval-package" class="panel-collapse in collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
</div>
|
||||
{% if model.eval_packages.all|length > 0 %}
|
||||
<!-- Eval Packages -->
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">Eval Packages</div>
|
||||
<div class="collapse-content">
|
||||
<ul class="menu bg-base-100 rounded-box w-full">
|
||||
{% for p in model.eval_packages.all %}
|
||||
<a class="list-group-item" href="{{ p.url }}"
|
||||
>{{ p.name|safe }}</a
|
||||
>
|
||||
<li>
|
||||
<a href="{{ p.url }}" class="hover:bg-base-200"
|
||||
>{{ p.name }}</a
|
||||
>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</ul>
|
||||
</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 in collapse">
|
||||
<div class="panel-body list-group-item">{{ model.status }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if model.ready_for_prediction %}
|
||||
<!-- 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 in collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<!-- Model Status -->
|
||||
<div class="collapse-arrow bg-base-200 collapse">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">Model Status</div>
|
||||
<div class="collapse-content">{{ model.status }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% 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">Predict</div>
|
||||
<div class="collapse-content">
|
||||
<div class="form-control">
|
||||
<div class="join w-full">
|
||||
<input
|
||||
id="smiles-to-predict"
|
||||
type="text"
|
||||
class="form-control"
|
||||
class="input input-bordered join-item grow"
|
||||
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>
|
||||
<button
|
||||
class="btn btn-primary join-item"
|
||||
type="button"
|
||||
id="predict-button"
|
||||
>
|
||||
Predict!
|
||||
</button>
|
||||
</div>
|
||||
<div id="predictLoading"></div>
|
||||
<div id="predictResultTable"></div>
|
||||
</div>
|
||||
<div id="predictLoading" class="mt-2"></div>
|
||||
<div id="predictResultTable" class="mt-4"></div>
|
||||
</div>
|
||||
<!-- End Predict Panel -->
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if model.ready_for_prediction and model.app_domain %}
|
||||
<!-- App Domain -->
|
||||
<div
|
||||
class="panel panel-default panel-heading list-group-item"
|
||||
style="background-color:silver"
|
||||
>
|
||||
<h4 class="panel-title">
|
||||
<a
|
||||
id="app-domain-assessment-link"
|
||||
data-toggle="collapse"
|
||||
data-parent="#model-detail"
|
||||
href="#app-domain-assessment"
|
||||
>Applicability Domain Assessment</a
|
||||
>
|
||||
</h4>
|
||||
{% 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 id="app-domain-assessment" class="panel-collapse in collapse">
|
||||
<div class="panel-body list-group-item">
|
||||
<div class="input-group">
|
||||
<div class="collapse-content">
|
||||
<div class="form-control">
|
||||
<div class="join w-full">
|
||||
<input
|
||||
id="smiles-to-assess"
|
||||
type="text"
|
||||
class="form-control"
|
||||
class="input input-bordered join-item grow"
|
||||
placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
|
||||
/>
|
||||
<span class="input-group-btn">
|
||||
<button
|
||||
class="btn btn-default"
|
||||
type="submit"
|
||||
id="assess-button"
|
||||
>
|
||||
Assess!
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="appDomainLoading"></div>
|
||||
<div id="appDomainAssessmentResultTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End App Domain -->
|
||||
{% endif %}
|
||||
|
||||
{% 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 in collapse">
|
||||
<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>
|
||||
<button
|
||||
class="btn btn-primary join-item"
|
||||
type="button"
|
||||
id="assess-button"
|
||||
>
|
||||
Assess!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="appDomainLoading" class="mt-2"></div>
|
||||
<div id="appDomainAssessmentResultTable" class="mt-4"></div>
|
||||
</div>
|
||||
{# prettier-ignore-start #}
|
||||
<script>
|
||||
$(function () {
|
||||
if (!($('#sg-chart').length > 0)) {
|
||||
return;
|
||||
}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
var x = ['Recall'];
|
||||
var y = ['Precision'];
|
||||
var thres = ['threshold'];
|
||||
|
||||
// Compare function for the given array
|
||||
function compare(a, b) {
|
||||
if (a.threshold < b.threshold)
|
||||
return -1;
|
||||
else if (a.threshold > b.threshold)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getIndexForValue(data, val, val_name) {
|
||||
for (var idx in data) {
|
||||
if (data[idx][val_name] == val) {
|
||||
return idx;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
var data = {{ model.pr_curve|safe }}
|
||||
var dataLength = Object.keys(data).length;
|
||||
data.sort(compare);
|
||||
|
||||
for (var idx in data) {
|
||||
var d = data[idx];
|
||||
x.push(d.recall);
|
||||
y.push(d.precision);
|
||||
thres.push(d.threshold);
|
||||
}
|
||||
var chart = c3.generate({
|
||||
bindto: '#sg-chart',
|
||||
data: {
|
||||
onclick: function (d, e) {
|
||||
var idx = d.index;
|
||||
var thresh = data[dataLength - idx - 1].threshold;
|
||||
|
||||
//onclick(thresh)
|
||||
|
||||
},
|
||||
x: 'Recall',
|
||||
y: 'Precision',
|
||||
columns: [
|
||||
x,
|
||||
y,
|
||||
//thres
|
||||
]
|
||||
},
|
||||
size: {
|
||||
height: 400, // TODO: Make variable to current modal width
|
||||
width: 480
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Recall',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
},
|
||||
y: {
|
||||
max: 1,
|
||||
min: 0,
|
||||
label: 'Precision',
|
||||
padding: 0,
|
||||
tick: {
|
||||
fit: true,
|
||||
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
|
||||
}
|
||||
}
|
||||
},
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
title: function (recall) {
|
||||
idx = getIndexForValue(data, recall, "recall");
|
||||
if (idx != -1) {
|
||||
return "Threshold: " + data[idx].threshold;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
value: function (precision, ratio, id) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{# prettier-ignore-end #}
|
||||
<!-- End Single Gen Curve Panel -->
|
||||
{% endif %}
|
||||
</div>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function handlePredictionResponse(data) {
|
||||
res = "<table class='table table-striped'>";
|
||||
res += "<thead>";
|
||||
res += "<th scope='col'>#</th>";
|
||||
{# prettier-ignore-start #}
|
||||
{# FIXME: This is a hack to get the precision recall curve data into the JavaScript code. #}
|
||||
<script>
|
||||
function handlePredictionResponse(data) {
|
||||
let res = "<table class='table table-zebra'>"
|
||||
res += "<thead>"
|
||||
res += "<th scope='col'>#</th>"
|
||||
|
||||
columns = ["products", "image", "probability", "btrule"];
|
||||
const 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(divid) {
|
||||
$("#" + divid).removeClass("alert alert-danger");
|
||||
$("#" + divid).empty();
|
||||
}
|
||||
|
||||
if ($("#predict-button").length > 0) {
|
||||
$("#predict-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("predictResultTable");
|
||||
|
||||
data = {
|
||||
smiles: $("#smiles-to-predict").val(),
|
||||
classify: "ILikeCats!",
|
||||
};
|
||||
|
||||
if (data["smiles"].trim() === "") {
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(
|
||||
"Please enter a SMILES string to predict!",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
makeLoadingGif("#predictLoading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: "get",
|
||||
data: data,
|
||||
url: "",
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#predictLoading").empty();
|
||||
handlePredictionResponse(data);
|
||||
} catch (error) {
|
||||
$("#predictLoading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(
|
||||
"Error while processing response :/",
|
||||
);
|
||||
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;
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown, x) {
|
||||
$("#predictLoading").empty();
|
||||
$("#predictResultTable").addClass("alert alert-danger");
|
||||
$("#predictResultTable").append(jqXHR.responseJSON.error);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ($("#assess-button").length > 0) {
|
||||
$("#assess-button").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clear("appDomainAssessmentResultTable");
|
||||
|
||||
data = {
|
||||
smiles: $("#smiles-to-assess").val(),
|
||||
"app-domain-assessment": "ILikeCats!",
|
||||
};
|
||||
|
||||
if (data["smiles"].trim() === "") {
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append(
|
||||
"Please enter a SMILES string to predict!",
|
||||
);
|
||||
return;
|
||||
res += "</tbody>"
|
||||
res += "</table>"
|
||||
const resultTable = document.getElementById("predictResultTable");
|
||||
if (resultTable) {
|
||||
resultTable.innerHTML = res;
|
||||
}
|
||||
}
|
||||
|
||||
makeLoadingGif("#appDomainLoading", "{% static '/images/wait.gif' %}");
|
||||
$.ajax({
|
||||
type: "get",
|
||||
data: data,
|
||||
url: "",
|
||||
success: function (data, textStatus) {
|
||||
try {
|
||||
$("#appDomainLoading").empty();
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
$("#appDomainLoading").empty();
|
||||
$("#appDomainAssessmentResultTable").addClass(
|
||||
"alert alert-danger",
|
||||
);
|
||||
$("#appDomainAssessmentResultTable").append(
|
||||
"Error while processing response :/",
|
||||
);
|
||||
function clear(divid) {
|
||||
const element = document.getElementById(divid);
|
||||
if (element) {
|
||||
element.classList.remove("alert", "alert-error");
|
||||
element.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
function makeLoadingGif(selector, gifPath) {
|
||||
const element = document.querySelector(selector);
|
||||
if (element) {
|
||||
element.innerHTML = '<img src="' + gifPath + '" alt="Loading...">';
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
{% if model.model_status == 'FINISHED' %}
|
||||
// Precision Recall Curve
|
||||
const sgChart = document.getElementById('sg-chart');
|
||||
if (sgChart) {
|
||||
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;
|
||||
}
|
||||
|
||||
var data = {{ model.pr_curve|safe }};
|
||||
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: '#sg-chart',
|
||||
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
|
||||
}
|
||||
});
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
makeLoadingGif("#predictLoading", "{% static '/images/wait.gif' %}");
|
||||
|
||||
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.innerHTML = "";
|
||||
handlePredictionResponse(data);
|
||||
})
|
||||
.catch(error => {
|
||||
const loadingEl = document.getElementById("predictLoading");
|
||||
if (loadingEl) loadingEl.innerHTML = "";
|
||||
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;
|
||||
}
|
||||
|
||||
makeLoadingGif("#appDomainLoading", "{% static '/images/wait.gif' %}");
|
||||
|
||||
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.innerHTML = "";
|
||||
if (typeof handleAssessmentResponse === 'function') {
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
}
|
||||
console.log(data);
|
||||
})
|
||||
.catch(error => {
|
||||
const loadingEl = document.getElementById("appDomainLoading");
|
||||
if (loadingEl) loadingEl.innerHTML = "";
|
||||
const resultTable = document.getElementById("appDomainAssessmentResultTable");
|
||||
if (resultTable) {
|
||||
resultTable.classList.add("alert", "alert-error");
|
||||
resultTable.innerHTML = error.error || "Error while processing response :/";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
$("#appDomainLoading").empty();
|
||||
$("#appDomainAssessmentResultTable").addClass("alert alert-danger");
|
||||
$("#appDomainAssessmentResultTable").append(
|
||||
jqXHR.responseJSON.error,
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
{# prettier-ignore-end #}
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user