improve modal view

atlas/templates/atlas/case_display_block.html

@@ -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 viewer_element = document.getElementById('single-dicom-viewer');
-        const images = JSON.parse(dicomViewer.getAttribute('data-images'));
+                            const images = JSON.parse(viewer_element.getAttribute('data-images'));
                             window.loadDicomViewer(images);
-                annotationjson = JSON.parse(dicomViewer.dataset.annotationjson);
+                            annotationjson = JSON.parse(viewer_element.dataset.annotationjson);
-                viewport = JSON.parse(dicomViewer.dataset.viewportjson);
+                            viewport = JSON.parse(viewer_element.dataset.viewportjson);
-                current_image_id_index = dicomViewer.dataset.currentimageid;
+                            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")
+                                // Then we load the annotation and viewport
-                    // Load the annotation and viewport on the DICOM element
                                 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'));
+                            document.getElementById("reload-finding").addEventListener("click", function () {
-        console.log(images)
+                                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>

atlas/templates/atlas/series_finding_details.html

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

atlas/templates/atlas/series_viewer.html

@@ -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);
             }
         }