From de5b6c36f39c2f03f18001e8967439d0d2263261 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 23 Mar 2026 16:13:56 +0000
Subject: [PATCH] Refactor modal handling for display sets and findings;
 extract modals into partials for improved maintainability

---
 atlas/static/atlas/js/markup_inserter.js      | 27 +++++++-
 atlas/templates/atlas/case_display_block.html | 66 +------------------
 .../atlas/partials/_displayset_modals.html    | 47 +++++++++++++
 .../atlas/partials/_finding_modal.html        | 17 +++++
 4 files changed, 92 insertions(+), 65 deletions(-)
 create mode 100644 atlas/templates/atlas/partials/_displayset_modals.html
 create mode 100644 atlas/templates/atlas/partials/_finding_modal.html

diff --git a/atlas/static/atlas/js/markup_inserter.js b/atlas/static/atlas/js/markup_inserter.js
index f60dfbfc..ab71813c 100644
--- a/atlas/static/atlas/js/markup_inserter.js
+++ b/atlas/static/atlas/js/markup_inserter.js
@@ -331,7 +331,32 @@
         var popup = document.createElement('div'); popup.id = 'markup-popup'; popup.className = 'markup-popup';
         popup.innerHTML = '<div style="font-weight:600;margin-bottom:.25rem;">'+ (label||type+':'+pk) +'</div>';
         var openBtn = document.createElement('button'); openBtn.type='button'; openBtn.className='btn btn-sm btn-outline-primary me-2'; openBtn.textContent='Open';
-        openBtn.addEventListener('click', function(){ var url = getDetailUrl(type, pk); if(url) showModalForUrl(url, label); popup.remove(); });
+        openBtn.addEventListener('click', function(){
+            var url = getDetailUrl(type, pk);
+            try{
+                // Prefer page-specific modal loaders if present so we reuse existing Bootstrap modals/viewers
+                if(type === 'displayset'){
+                    if(typeof window.loadDisplaysetModal === 'function'){
+                        window.loadDisplaysetModal(url, pk);
+                        popup.remove();
+                        return;
+                    }
+                    var dsBtn = document.querySelector('.view-displayset-modal[data-ds-id="'+pk+'"]');
+                    if(dsBtn){ dsBtn.click(); popup.remove(); return; }
+                }
+                if(type === 'seriesfinding' || type === 'finding'){
+                    if(typeof window.loadFindingModal === 'function'){
+                        window.loadFindingModal(pk, url);
+                        popup.remove();
+                        return;
+                    }
+                    var fBtn = document.querySelector('.view-finding-modal[data-finding-id="'+pk+'"]');
+                    if(fBtn){ fBtn.click(); popup.remove(); return; }
+                }
+            }catch(e){ console.warn('error invoking page modal loader', e); }
+            if(url) showModalForUrl(url, label);
+            popup.remove();
+        });
         var closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn btn-sm btn-outline-secondary'; closeBtn.textContent='Close'; closeBtn.addEventListener('click', function(){ popup.remove(); });
         popup.appendChild(openBtn); popup.appendChild(closeBtn);
         document.body.appendChild(popup);
diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 4449701f..09c5ca31 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -868,53 +868,7 @@
     {% include 'question_notes.html' %}
 
 </div>
-<div class="modal fade" id="displaysetModal" tabindex="-1" aria-labelledby="displaysetModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="displaysetModalLabel">Display Set Details</h5>
-                <button type="button" class="btn btn-sm btn-outline-primary ms-2 displayset-fullscreen-btn" title="Open fullscreen">⤢</button>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body" id="displaysetModalBody">
-                <p>Loading...</p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Fullscreen displayset modal: viewer left, details right -->
-<div class="modal fade" id="displaysetFullscreenModal" tabindex="-1" aria-labelledby="displaysetFullscreenModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-fullscreen">
-        <div class="modal-content" style="height:100vh;">
-            <div class="modal-header">
-                <h5 class="modal-title" id="displaysetFullscreenModalLabel">Display Set — Fullscreen</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body p-0" id="displaysetFullscreenBody">
-                <div class="container-fluid h-100">
-                    <div class="row g-0 h-100">
-                        <div class="col-8" id="displaysetFullscreenLeft" style="height:100%; overflow:auto; background:#000; display:flex;">
-                        </div>
-                        <div class="col-4" id="displaysetFullscreenRight" style="height:100%; overflow:auto; padding:1rem;"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<style>
-    /* Ensure fullscreen modal and viewer stretch vertically */
-    #displaysetFullscreenModal .modal-content { height: 100vh; }
-    #displaysetFullscreenModal .modal-body { height: calc(100vh - 56px); padding: 0; }
-    #displaysetFullscreenModal .container-fluid, #displaysetFullscreenModal .row { height: 100%; }
-    #displaysetFullscreenLeft { display:flex; align-items:stretch; }
-    #displaysetFullscreenLeft .dicom-viewer-root { height:100% !important; min-height:100% !important; width:100% !important; flex:1 1 auto; }
-</style>
+{% include 'atlas/partials/_displayset_modals.html' %}
 
 <p><b>Checked by:</b> {% for verified in case.verified.all %} <a
     href="{% url 'atlas:verified_detail' pk=verified.pk %}">{{verified}}</a>, {% endfor %}</p>
@@ -925,23 +879,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-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="findingModalLabel">Finding Details</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body" id="findingModalBody">
-                <!-- Finding details will be loaded here dynamically -->
-                <p>Loading...</p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            </div>
-        </div>
-    </div>
-</div>
+{% include 'atlas/partials/_finding_modal.html' %}
 <!-- Reorder Series Modal -->
 <div class="modal fade" id="reorderSeriesModal" tabindex="-1" aria-labelledby="reorderSeriesModalLabel" aria-hidden="true">
     <div class="modal-dialog">
diff --git a/atlas/templates/atlas/partials/_displayset_modals.html b/atlas/templates/atlas/partials/_displayset_modals.html
new file mode 100644
index 00000000..ca380d4c
--- /dev/null
+++ b/atlas/templates/atlas/partials/_displayset_modals.html
@@ -0,0 +1,47 @@
+<div class="modal fade" id="displaysetModal" tabindex="-1" aria-labelledby="displaysetModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="displaysetModalLabel">Display Set Details</h5>
+                <button type="button" class="btn btn-sm btn-outline-primary ms-2 displayset-fullscreen-btn" title="Open fullscreen">⤢</button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="displaysetModalBody">
+                <p>Loading...</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Fullscreen displayset modal: viewer left, details right -->
+<div class="modal fade" id="displaysetFullscreenModal" tabindex="-1" aria-labelledby="displaysetFullscreenModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+        <div class="modal-content" style="height:100vh;">
+            <div class="modal-header">
+                <h5 class="modal-title" id="displaysetFullscreenModalLabel">Display Set — Fullscreen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-0" id="displaysetFullscreenBody">
+                <div class="container-fluid h-100">
+                    <div class="row g-0 h-100">
+                        <div class="col-8" id="displaysetFullscreenLeft" style="height:100%; overflow:auto; background:#000; display:flex;">
+                        </div>
+                        <div class="col-4" id="displaysetFullscreenRight" style="height:100%; overflow:auto; padding:1rem;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Ensure fullscreen modal and viewer stretch vertically */
+    #displaysetFullscreenModal .modal-content { height: 100vh; }
+    #displaysetFullscreenModal .modal-body { height: calc(100vh - 56px); padding: 0; }
+    #displaysetFullscreenModal .modal-content .container-fluid, #displaysetFullscreenModal .modal-content .row { height: 100%; }
+    #displaysetFullscreenLeft { display:flex; align-items:stretch; }
+    #displaysetFullscreenLeft .dicom-viewer-root { height:100% !important; min-height:100% !important; width:100% !important; flex:1 1 auto; }
+</style>
diff --git a/atlas/templates/atlas/partials/_finding_modal.html b/atlas/templates/atlas/partials/_finding_modal.html
new file mode 100644
index 00000000..7279e495
--- /dev/null
+++ b/atlas/templates/atlas/partials/_finding_modal.html
@@ -0,0 +1,17 @@
+<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">
+                <h5 class="modal-title" id="findingModalLabel">Finding Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="findingModalBody">
+                <!-- Finding details will be loaded here dynamically -->
+                <p>Loading...</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>