forked from enviPath/enviPy
[Fix] UI Fixes (#266)
Rather than have a bunch of pull-requests that @jebus will have to merge shall we collect some of the fixes for the UI issues I found in here. - [x] #259 - [x] #260 - [x] #261 - [x] #262 - [x] #263 - [x] #264 - [x] #265 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Reviewed-on: enviPath/enviPy#266 Co-authored-by: Liam Brydon <lbry121@aucklanduni.ac.nz> Co-committed-by: Liam Brydon <lbry121@aucklanduni.ac.nz>
This commit is contained in:
@ -136,7 +136,11 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="predictLoading" class="mt-2"></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>
|
||||
@ -167,7 +171,11 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="appDomainLoading" class="mt-2"></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>
|
||||
@ -397,7 +405,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
makeLoadingGif("#predictLoading", "{% static '/images/wait.gif' %}");
|
||||
const loadingEl = document.getElementById("predictLoading");
|
||||
if (loadingEl) loadingEl.classList.remove("hidden");
|
||||
|
||||
const params = new URLSearchParams({
|
||||
smiles: smiles,
|
||||
@ -418,12 +427,12 @@
|
||||
})
|
||||
.then(data => {
|
||||
const loadingEl = document.getElementById("predictLoading");
|
||||
if (loadingEl) loadingEl.innerHTML = "";
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
handlePredictionResponse(data);
|
||||
})
|
||||
.catch(error => {
|
||||
const loadingEl = document.getElementById("predictLoading");
|
||||
if (loadingEl) loadingEl.innerHTML = "";
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
const resultTable = document.getElementById("predictResultTable");
|
||||
if (resultTable) {
|
||||
resultTable.classList.add("alert", "alert-error");
|
||||
@ -453,7 +462,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
makeLoadingGif("#appDomainLoading", "{% static '/images/wait.gif' %}");
|
||||
const loadingEl = document.getElementById("appDomainLoading");
|
||||
if (loadingEl) loadingEl.classList.remove("hidden");
|
||||
|
||||
const params = new URLSearchParams({
|
||||
smiles: smiles,
|
||||
@ -474,7 +484,7 @@
|
||||
})
|
||||
.then(data => {
|
||||
const loadingEl = document.getElementById("appDomainLoading");
|
||||
if (loadingEl) loadingEl.innerHTML = "";
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
if (typeof handleAssessmentResponse === 'function') {
|
||||
handleAssessmentResponse("{% url 'depict' %}", data);
|
||||
}
|
||||
@ -482,7 +492,7 @@
|
||||
})
|
||||
.catch(error => {
|
||||
const loadingEl = document.getElementById("appDomainLoading");
|
||||
if (loadingEl) loadingEl.innerHTML = "";
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
const resultTable = document.getElementById("appDomainAssessmentResultTable");
|
||||
if (resultTable) {
|
||||
resultTable.classList.add("alert", "alert-error");
|
||||
|
||||
@ -211,11 +211,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="vizdiv">
|
||||
{% if pathway.completed %}
|
||||
<div class="tooltip tooltip-bottom absolute top-4 right-4 z-10">
|
||||
<div class="tooltip-content">Pathway prediction complete.</div>
|
||||
<div id="status" class="flex items-center">
|
||||
<div
|
||||
id="vizdiv"
|
||||
x-data="pathwayViewer({
|
||||
status: '{{ pathway.status }}',
|
||||
modified: '{{ pathway.modified|date:"Y-m-d H:i:s" }}',
|
||||
statusUrl: '{{ pathway.url }}?status=true'
|
||||
})"
|
||||
x-init="init()"
|
||||
>
|
||||
<!-- Status Display -->
|
||||
<div class="tooltip tooltip-left absolute top-4 right-4 z-10">
|
||||
<div class="tooltip-content" x-text="statusTooltip"></div>
|
||||
<div id="status" class="flex items-center">
|
||||
<!-- Completed icon -->
|
||||
<template x-if="status === 'completed'">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -230,12 +240,9 @@
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{% elif pathway.failed %}
|
||||
<div class="tooltip tooltip-bottom absolute top-4 right-4 z-10">
|
||||
<div class="tooltip-content">Pathway prediction failed.</div>
|
||||
<div id="status" class="flex items-center">
|
||||
</template>
|
||||
<!-- Failed icon -->
|
||||
<template x-if="status === 'failed'">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -251,19 +258,28 @@
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="M6 6l12 12" />
|
||||
</svg>
|
||||
</template>
|
||||
<!-- Loading spinner -->
|
||||
<div
|
||||
x-show="status === 'running'"
|
||||
style="width: 20px; height: 20px;"
|
||||
>
|
||||
{% include "components/loading-spinner.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="tooltip tooltip-bottom absolute top-4 right-4 z-10">
|
||||
<div class="tooltip-content">Pathway prediction running.</div>
|
||||
<div id="status" class="flex items-center">
|
||||
<div
|
||||
id="status-loading-spinner"
|
||||
style="width: 20px; height: 20px;"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Update Notice -->
|
||||
<div
|
||||
x-show="showUpdateNotice"
|
||||
x-cloak
|
||||
class="alert alert-info absolute right-4 bottom-4 left-4 z-10"
|
||||
>
|
||||
<span x-html="updateMessage"></span>
|
||||
<button @click="reloadPage()" class="btn btn-primary btn-sm mt-2">
|
||||
Reload page
|
||||
</button>
|
||||
</div>
|
||||
<svg id="pwsvg">
|
||||
<defs>
|
||||
<marker
|
||||
@ -463,60 +479,6 @@
|
||||
var pathway = {{ pathway.d3_json | safe }};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize loading spinner if pathway is running
|
||||
if (pathway.status === 'running') {
|
||||
const spinnerContainer = document.getElementById('status-loading-spinner');
|
||||
if (spinnerContainer) {
|
||||
showLoadingSpinner(spinnerContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// If prediction is still running, regularly check status
|
||||
if (pathway.status === 'running') {
|
||||
let last_modified = pathway.modified;
|
||||
|
||||
let pollInterval = setInterval(async () => {
|
||||
try {
|
||||
const response = await fetch("{{ pathway.url }}?status=true", {});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.modified > last_modified) {
|
||||
var msg = 'Prediction ';
|
||||
var btn = '<button type="button" onclick="location.reload()" class="btn btn-primary btn-sm mt-2" id="reloadBtn">Reload page</button>';
|
||||
|
||||
if (data.status === "running") {
|
||||
msg += 'is still running. But the Pathway was updated.<br>' + btn;
|
||||
} else if (data.status === "completed") {
|
||||
msg += 'is completed. Reload the page to see the updated Pathway.<br>' + btn;
|
||||
} else if (data.status === "failed") {
|
||||
msg += 'failed. Reload the page to see the current shape.<br>' + btn;
|
||||
}
|
||||
|
||||
showStatusPopover(msg);
|
||||
}
|
||||
|
||||
if (data.status === "completed" || data.status === "failed") {
|
||||
const statusBtn = document.getElementById('status');
|
||||
const tooltipContent = statusBtn.parentElement.querySelector('.tooltip-content');
|
||||
const spinner = statusBtn.querySelector('#status-loading-spinner');
|
||||
if (spinner) spinner.remove();
|
||||
|
||||
if (data.status === "completed") {
|
||||
statusBtn.innerHTML = `<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-check"><path d="M20 6 9 17l-5-5"/></svg>`;
|
||||
tooltipContent.textContent = 'Pathway prediction complete.';
|
||||
} else {
|
||||
statusBtn.innerHTML = `<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-x"><path d="M18 6 6 18"/><path d="M6 6l12 12"/></svg>`;
|
||||
tooltipContent.textContent = 'Pathway prediction failed.';
|
||||
}
|
||||
clearInterval(pollInterval);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Polling error:", err);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
draw(pathway, 'vizdiv');
|
||||
|
||||
// Transform references in description
|
||||
|
||||
Reference in New Issue
Block a user