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:
@ -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