improve modal view

This commit is contained in:
Ross
2025-05-12 23:41:25 +01:00
parent 77ee83cb08
commit ead5bfcace
3 changed files with 188 additions and 201 deletions
+22 -26
View File
@@ -56,7 +56,7 @@
{% endif %}
<button
<button
hx-get='{% url "cimar_study_viewer_embed" case.cimar_uuid %}'
hx-target="#modals-here"
hx-trigger="click"
@@ -64,7 +64,7 @@
data-bs-target="#modals-here"
class="btn primary">Open Modal</button>
<div id="modals-here"
<div id="modals-here"
class="modal modal-blur fade"
style="display: none"
aria-hidden="false"
@@ -72,7 +72,7 @@
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content"></div>
</div>
</div>
</div>
<a href='{% url "cimar_study_viewer" case.cimar_uuid %}'>Viewer</a>
@@ -87,13 +87,13 @@
</details>
<details>
<summary>Study series</summary>
<button
<button
id='load-series'
hx-get='{% url "cimar_study_series_block" case.cimar_uuid %}'
hx-trigger='load'
hx-swap='outerHTML'>
Load Series
</button>
</button>
</details>
<a href='{% url "generic:cimar_case_refresh" case.cimar_uuid %}'>Refresh</a>
@@ -331,7 +331,7 @@
<p><b>Case size:</b> {{ case.get_total_series_images_size | filesizeformat }}</p>
<div class="modal fade" id="findingModal" tabindex="-1" aria-labelledby="findingModalLabel" aria-hidden="true">
<div class="modal fade" id="findingModal" tabindex="-1" aria-labelledby="findingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@@ -347,9 +347,9 @@
</div>
</div>
</div>
</div>
</div>
<script>
<script>
// From series_viewer.html
function loadAnnotationAndViewportOnElement(annotation, viewport, dicom_element, current_image_id_index) {
cornerstoneTools.globalImageIdSpecificToolStateManager.clear(dicom_element);
@@ -415,21 +415,22 @@
.then(response => response.text())
.then(html => {
modalBody.innerHTML = html; // Load the fetched HTML into the modal body
const dicomViewer = document.getElementById('single-dicom-viewer');
const images = JSON.parse(dicomViewer.getAttribute('data-images'));
const viewer_element = document.getElementById('single-dicom-viewer');
const images = JSON.parse(viewer_element.getAttribute('data-images'));
window.loadDicomViewer(images);
annotationjson = JSON.parse(dicomViewer.dataset.annotationjson);
viewport = JSON.parse(dicomViewer.dataset.viewportjson);
current_image_id_index = dicomViewer.dataset.currentimageid;
annotationjson = JSON.parse(viewer_element.dataset.annotationjson);
viewport = JSON.parse(viewer_element.dataset.viewportjson);
current_image_id_index = viewer_element.dataset.currentimageid;
dicom_element = $(".cornerstone-element").get(0);
// We have a slight delay to allow the viewer to load
setTimeout(function () {
console.log("loading annotation and viewport")
// Load the annotation and viewport on the DICOM element
// Then we load the annotation and viewport
loadAnnotationAndViewportOnElement(annotationjson, viewport, dicom_element, current_image_id_index);
}, 200);
//loadAnnotationAndViewportOnElement(annotationjson, viewport, dicom_element, current_image_id_index);
//const annotations = JSON.parse(dicomViewer.getAttribute('data-annotations'));
console.log(images)
document.getElementById("reload-finding").addEventListener("click", function () {
loadAnnotationAndViewportOnElement(annotationjson, viewport, dicom_element, current_image_id_index);
});
// Initialize the DICOM viewer with the images and annotations
})
@@ -443,20 +444,15 @@
});
});
// Clear the iframe src when the modal is closed
document.getElementById("findingModal").addEventListener("hidden.bs.modal", function () {
iframe.src = "";
});
});
</script>
</script>
<style>
<style>
/* Highlight style for the series-block */
.highlight-series {
background-color: blue;
transition: background-color 0.3s ease, border 0.3s ease;
}
</style>
</style>
@@ -1,6 +1,5 @@
<div>
<h5>Finding: {{ finding.name }}</h5>
<p><b>Description:</b> {{ finding.description }}</p>
{% if finding.conditions.all %}
<p><b>Conditions:</b></p>
@@ -18,6 +17,7 @@
{% endfor %}
</ul>
{% endif %}
<button class="btn btn-primary" id="reload-finding">Reload</button>
{% with image_url_array_and_count=finding.series.get_image_url_array_and_count %}
<div id="single-dicom-viewer" class="dicom-viewer" data-images='{{ image_url_array_and_count.0 }}' data-annotations='' data-annotationjson={{finding.annotation_json}}
-9
View File
@@ -314,26 +314,17 @@
cornerstone.getEnabledElement(dicom_element).viewport = viewport
cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
annotation);
console.log("annotation", annotation)
console.log("viewport", viewport)
//cornerstone.getEnabledElement(dicom_element).toolStateManager.restoreToolState(annotationjson)
cornerstone.resize(dicom_element);
console.log("current_image_id_index", current_image_id_index)
//current_image_id_index = parseInt(current_image_id_index);
console.log(current_image_id_index, Number.isInteger(current_image_id_index))
if (Number.isInteger(current_image_id_index)) {
console.log("loading stack index")
dicomViewer.loadStackIndex(current_image_id_index, dicom_element);
} else {
try {
console.log("current_image_id_index", current_image_id_index)
dicomViewer.loadImageById(current_image_id_index, dicom_element);
} catch (e) {
console.log(e)
console.log("loading image by id failed")
console.log("loading next annotation image")
dicomViewer.getNextAnnotationImage(dicom_element);
}
}