Refactor display set modal loading functions for improved readability and error handling
This commit is contained in:
Ross
@@ -1200,34 +1200,88 @@
|
|||||||
const dsModalBody = document.getElementById("displaysetModalBody");
|
const dsModalBody = document.getElementById("displaysetModalBody");
|
||||||
const dsFullscreenModal = new bootstrap.Modal(document.getElementById("displaysetFullscreenModal"));
|
const dsFullscreenModal = new bootstrap.Modal(document.getElementById("displaysetFullscreenModal"));
|
||||||
|
|
||||||
|
// Loader functions: can be called directly on reload
|
||||||
|
async function loadDisplaysetModal(url, dsId) {
|
||||||
|
if (!url && dsId) url = `/atlas/${dsId}/display_sets/modal`;
|
||||||
|
if (!url) return;
|
||||||
|
dsModalBody.innerHTML = "<p>Loading...</p>";
|
||||||
|
try {
|
||||||
|
const resp = await fetch(url);
|
||||||
|
const html = await resp.text();
|
||||||
|
dsModalBody.innerHTML = html;
|
||||||
|
try {
|
||||||
|
const fsBtn = document.querySelector('.displayset-fullscreen-btn');
|
||||||
|
if (fsBtn) {
|
||||||
|
fsBtn.dataset.url = url;
|
||||||
|
if (dsId) fsBtn.dataset.dsId = dsId;
|
||||||
|
}
|
||||||
|
} catch (e) { console.warn(e); }
|
||||||
|
try { setUrlParam('displayset', dsId); } catch (e) {}
|
||||||
|
setTimeout(function () { try { window.mountDicomViewers(); } catch (e) { console.warn('mountDicomViewers not available', e); } }, 500);
|
||||||
|
dsModal.show();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading display set details:', error);
|
||||||
|
dsModalBody.innerHTML = "<p>Failed to load display set.</p>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadDisplaysetFullscreen(url, dsId) {
|
||||||
|
if (!url && dsId) url = `/atlas/${dsId}/display_sets/modal`;
|
||||||
|
if (!url) return;
|
||||||
|
document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Loading viewer...</p>';
|
||||||
|
document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Loading details...</p>';
|
||||||
|
try {
|
||||||
|
const resp = await fetch(url);
|
||||||
|
const html = await resp.text();
|
||||||
|
const tmp = document.createElement('div');
|
||||||
|
tmp.innerHTML = html;
|
||||||
|
const viewer = tmp.querySelector('.dicom-viewer-root');
|
||||||
|
if (viewer) {
|
||||||
|
const left = document.getElementById('displaysetFullscreenLeft');
|
||||||
|
left.innerHTML = '';
|
||||||
|
left.appendChild(viewer);
|
||||||
|
try { viewer.style.height='100%'; viewer.style.minHeight='100%'; viewer.style.width='100%'; viewer.style.display='block'; viewer.style.flex='1 1 auto'; } catch (e){}
|
||||||
|
} else {
|
||||||
|
document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">No viewer available</p>';
|
||||||
|
}
|
||||||
|
const viewerInTmp = tmp.querySelector('.dicom-viewer-root');
|
||||||
|
if (viewerInTmp) viewerInTmp.remove();
|
||||||
|
document.getElementById('displaysetFullscreenRight').innerHTML = tmp.innerHTML;
|
||||||
|
try { if (dsId) { setUrlParam('displayset', dsId); setUrlParam('displayset_full', '1'); } } catch (e) {}
|
||||||
|
dsFullscreenModal.show();
|
||||||
|
setTimeout(function () { try { window.mountDicomViewers(); } catch (e) { console.warn('mountDicomViewers not available for fullscreen', e); } }, 500);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading fullscreen display set:', error);
|
||||||
|
document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Failed to load viewer</p>';
|
||||||
|
document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Failed to load details.</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadFindingModal(findingId, url) {
|
||||||
|
if (!url && findingId) url = `/atlas/series_finding/${findingId}/details/`;
|
||||||
|
if (!url) return;
|
||||||
|
const modalBody = document.getElementById('findingModalBody');
|
||||||
|
modalBody.innerHTML = '<p>Loading...</p>';
|
||||||
|
try {
|
||||||
|
const resp = await fetch(url);
|
||||||
|
const html = await resp.text();
|
||||||
|
modalBody.innerHTML = html;
|
||||||
|
setTimeout(function () { try { window.mountDicomViewers(); } catch (e) { console.warn('mountDicomViewers not available', e); } }, 200);
|
||||||
|
try { setUrlParam('finding', findingId); } catch (e) {}
|
||||||
|
const modal = new bootstrap.Modal(document.getElementById('findingModal'));
|
||||||
|
modal.show();
|
||||||
|
document.getElementById('reload-finding')?.addEventListener('click', function () { window.mountDicomViewers(); });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error loading finding details:', e);
|
||||||
|
modalBody.innerHTML = '<p>Failed to load finding details.</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelectorAll(".view-displayset-modal").forEach(button => {
|
document.querySelectorAll(".view-displayset-modal").forEach(button => {
|
||||||
button.addEventListener("click", function () {
|
button.addEventListener("click", function () {
|
||||||
const url = this.getAttribute("data-url");
|
const url = this.getAttribute("data-url");
|
||||||
const dsId = this.getAttribute('data-ds-id');
|
const dsId = this.getAttribute('data-ds-id');
|
||||||
dsModalBody.innerHTML = "<p>Loading...</p>";
|
loadDisplaysetModal(url, dsId);
|
||||||
fetch(url)
|
|
||||||
.then(response => response.text())
|
|
||||||
.then(html => {
|
|
||||||
dsModalBody.innerHTML = html;
|
|
||||||
// attach url to fullscreen button so it knows what to load
|
|
||||||
try {
|
|
||||||
const fsBtn = document.querySelector('.displayset-fullscreen-btn');
|
|
||||||
if (fsBtn) {
|
|
||||||
fsBtn.dataset.url = url;
|
|
||||||
if (dsId) fsBtn.dataset.dsId = dsId;
|
|
||||||
}
|
|
||||||
} catch (e) { console.warn(e); }
|
|
||||||
// add URL param so modal can be reopened after reload
|
|
||||||
try { setUrlParam('displayset', dsId); } catch (e) { /* ignore */ }
|
|
||||||
setTimeout(function () {
|
|
||||||
try { window.mountDicomViewers(); } catch (e) { console.warn('mountDicomViewers not available', e); }
|
|
||||||
}, 500);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error("Error loading display set details:", error);
|
|
||||||
dsModalBody.innerHTML = "<p>Failed to load display set.</p>";
|
|
||||||
});
|
|
||||||
dsModal.show();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1236,59 +1290,12 @@
|
|||||||
try { removeUrlParam('displayset'); removeUrlParam('displayset_full'); } catch (e) {}
|
try { removeUrlParam('displayset'); removeUrlParam('displayset_full'); } catch (e) {}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fullscreen button handler: fetch the same displayset content but lay out viewer left, details right
|
// Fullscreen button handler: call loader function
|
||||||
document.querySelectorAll('.displayset-fullscreen-btn').forEach(btn => {
|
document.querySelectorAll('.displayset-fullscreen-btn').forEach(btn => {
|
||||||
btn.addEventListener('click', function () {
|
btn.addEventListener('click', function () {
|
||||||
const url = btn.dataset.url;
|
const url = btn.dataset.url;
|
||||||
if (!url) return;
|
const dsId = btn.dataset.dsId || null;
|
||||||
const dsId = btn.dataset.dsId || (new URL(url, window.location.origin)).searchParams.get('displayset') || null;
|
loadDisplaysetFullscreen(url, dsId);
|
||||||
// show loading state
|
|
||||||
document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Loading viewer...</p>';
|
|
||||||
document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Loading details...</p>';
|
|
||||||
// set URL params for fullscreen
|
|
||||||
try { if (dsId) { setUrlParam('displayset', dsId); setUrlParam('displayset_full', '1'); } } catch (e) {}
|
|
||||||
|
|
||||||
fetch(url)
|
|
||||||
.then(response => response.text())
|
|
||||||
.then(html => {
|
|
||||||
const tmp = document.createElement('div');
|
|
||||||
tmp.innerHTML = html;
|
|
||||||
// find viewer element
|
|
||||||
const viewer = tmp.querySelector('.dicom-viewer-root');
|
|
||||||
if (viewer) {
|
|
||||||
// move viewer into left pane
|
|
||||||
const left = document.getElementById('displaysetFullscreenLeft');
|
|
||||||
left.innerHTML = '';
|
|
||||||
left.appendChild(viewer);
|
|
||||||
// force the viewer to fill the available space
|
|
||||||
try {
|
|
||||||
viewer.style.height = '100%';
|
|
||||||
viewer.style.minHeight = '100%';
|
|
||||||
viewer.style.width = '100%';
|
|
||||||
viewer.style.display = 'block';
|
|
||||||
viewer.style.flex = '1 1 auto';
|
|
||||||
} catch (e) { console.warn('failed to resize viewer element', e); }
|
|
||||||
} else {
|
|
||||||
document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">No viewer available</p>';
|
|
||||||
}
|
|
||||||
// remaining content (without viewer) goes to right pane
|
|
||||||
// remove viewer from tmp to avoid duplication
|
|
||||||
const viewerInTmp = tmp.querySelector('.dicom-viewer-root');
|
|
||||||
if (viewerInTmp) viewerInTmp.remove();
|
|
||||||
document.getElementById('displaysetFullscreenRight').innerHTML = tmp.innerHTML;
|
|
||||||
|
|
||||||
dsFullscreenModal.show();
|
|
||||||
|
|
||||||
// allow viewer to initialize
|
|
||||||
setTimeout(function () {
|
|
||||||
try { window.mountDicomViewers(); } catch (e) { console.warn('mountDicomViewers not available for fullscreen', e); }
|
|
||||||
}, 500);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Error loading fullscreen display set:', error);
|
|
||||||
document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Failed to load viewer</p>';
|
|
||||||
document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Failed to load details.</p>';
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user