forked from enviPath/enviPy
107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
/**
|
|
* Pathway Viewer Alpine.js Component
|
|
*
|
|
* Provides reactive status management and polling for pathway predictions.
|
|
* Handles status updates, change detection, and update notices.
|
|
*/
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
/**
|
|
* Pathway Viewer Component
|
|
*
|
|
* Usage:
|
|
* <div x-data="pathwayViewer({
|
|
* status: 'running',
|
|
* modified: '2024-01-01T00:00:00Z',
|
|
* statusUrl: '/pathway/123?status=true'
|
|
* })" x-init="init()">
|
|
* ...
|
|
* </div>
|
|
*/
|
|
Alpine.data('pathwayViewer', (config) => ({
|
|
status: config.status,
|
|
modified: config.modified,
|
|
statusUrl: config.statusUrl,
|
|
emptyDueToThreshold: config.emptyDueToThreshold === "True",
|
|
showUpdateNotice: false,
|
|
showEmptyDueToThresholdNotice: false,
|
|
emptyDueToThresholdMessage: 'The Pathway is empty due to the selected threshold. Please try a different threshold.',
|
|
updateMessage: '',
|
|
pollInterval: null,
|
|
|
|
get statusTooltip() {
|
|
const tooltips = {
|
|
'completed': 'Pathway prediction completed.',
|
|
'failed': 'Pathway prediction failed.',
|
|
'running': 'Pathway prediction running.'
|
|
};
|
|
return tooltips[this.status] || '';
|
|
},
|
|
|
|
init() {
|
|
if (this.status === 'running') {
|
|
this.startPolling();
|
|
}
|
|
|
|
if (this.emptyDueToThreshold) {
|
|
this.showEmptyDueToThresholdNotice = true;
|
|
}
|
|
|
|
},
|
|
|
|
startPolling() {
|
|
if (this.pollInterval) {
|
|
return;
|
|
}
|
|
this.pollInterval = setInterval(() => this.checkStatus(), 5000);
|
|
},
|
|
|
|
async checkStatus() {
|
|
try {
|
|
const response = await fetch(this.statusUrl);
|
|
const data = await response.json();
|
|
|
|
if (data.emptyDueToThreshold) {
|
|
this.emptyDueToThreshold = true;
|
|
this.showEmptyDueToThresholdNotice = true;
|
|
}
|
|
|
|
if (data.modified > this.modified) {
|
|
if (!this.emptyDueToThreshold) {
|
|
this.showUpdateNotice = true;
|
|
this.updateMessage = this.getUpdateMessage(data.status);
|
|
}
|
|
}
|
|
|
|
if (data.status !== 'running') {
|
|
this.status = data.status;
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Polling error:', err);
|
|
}
|
|
},
|
|
|
|
getUpdateMessage(status) {
|
|
let msg = 'Prediction ';
|
|
|
|
if (status === 'running') {
|
|
msg += 'is still running. But the Pathway was updated.';
|
|
} else if (status === 'completed') {
|
|
msg += 'is completed. Reload the page to see the updated Pathway.';
|
|
} else if (status === 'failed') {
|
|
msg += 'failed. Reload the page to see the current shape.';
|
|
}
|
|
|
|
return msg;
|
|
},
|
|
|
|
reloadPage() {
|
|
location.reload();
|
|
}
|
|
}));
|
|
});
|