feat: Implement dynamic loading for display set modals and fullscreen viewer

Co-authored-by: Copilot <copilot@github.com>

atlas/templates/atlas/case_display_block.html

@@ -823,7 +823,6 @@
     {% include 'question_notes.html' %}
 
 </div>
-{% 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>
@@ -1199,28 +1198,11 @@
             }
         }
 
-        document.querySelectorAll(".view-displayset-modal").forEach(button => {
-            button.addEventListener("click", function () {
-                const url = this.getAttribute("data-url");
-                const dsId = this.getAttribute('data-ds-id');
-                loadDisplaysetModal(url, dsId);
-            });
-        });
-
         // remove displayset param when modal closed
         document.getElementById('displaysetModal').addEventListener('hidden.bs.modal', function () {
             try { removeUrlParam('displayset'); removeUrlParam('displayset_full'); } catch (e) {}
         });
 
-        // Fullscreen button handler: call loader function
-        document.querySelectorAll('.displayset-fullscreen-btn').forEach(btn => {
-            btn.addEventListener('click', function () {
-                const url = btn.dataset.url;
-                const dsId = btn.dataset.dsId || null;
-                loadDisplaysetFullscreen(url, dsId);
-            });
-        });
-
         // remove fullscreen param when fullscreen modal closed
         document.getElementById('displaysetFullscreenModal').addEventListener('hidden.bs.modal', function () {
             try { removeUrlParam('displayset_full'); } catch (e) {}

atlas/templates/atlas/partials/_case_displaysets.html

@@ -89,8 +89,111 @@
     </ul>
 </div>
 
+{% include 'atlas/partials/_displayset_modals.html' %}
+
 <script>
     (function () {
+        if (!window.__displaysetPartialInitDone) {
+            window.__displaysetPartialInitDone = true;
+
+            if (typeof window.loadDisplaysetModal !== 'function') {
+                window.loadDisplaysetModal = async function (url, dsId) {
+                    if (!url && dsId) url = '/atlas/' + dsId + '/display_sets/modal';
+                    if (!url) return;
+
+                    var modalEl = document.getElementById('displaysetModal');
+                    var modalBody = document.getElementById('displaysetModalBody');
+                    if (!modalEl || !modalBody) return;
+
+                    modalBody.innerHTML = '<p>Loading...</p>';
+                    try {
+                        var resp = await fetch(url, { credentials: 'same-origin' });
+                        var html = await resp.text();
+                        modalBody.innerHTML = html;
+
+                        var fsBtn = modalEl.querySelector('.displayset-fullscreen-btn');
+                        if (fsBtn) {
+                            fsBtn.dataset.url = url;
+                            if (dsId) fsBtn.dataset.dsId = dsId;
+                        }
+
+                        bootstrap.Modal.getOrCreateInstance(modalEl).show();
+                    } catch (error) {
+                        console.error('Error loading display set details:', error);
+                        modalBody.innerHTML = '<p>Failed to load display set.</p>';
+                    }
+                };
+            }
+
+            if (typeof window.loadDisplaysetFullscreen !== 'function') {
+                window.loadDisplaysetFullscreen = async function (url, dsId) {
+                    if (!url && dsId) url = '/atlas/' + dsId + '/display_sets/modal';
+                    if (!url) return;
+
+                    var leftEl = document.getElementById('displaysetFullscreenLeft');
+                    var rightEl = document.getElementById('displaysetFullscreenRight');
+                    var fullModalEl = document.getElementById('displaysetFullscreenModal');
+                    if (!leftEl || !rightEl || !fullModalEl) return;
+
+                    leftEl.innerHTML = '<p style="color:#fff; padding:1rem;">Loading viewer...</p>';
+                    rightEl.innerHTML = '<p>Loading details...</p>';
+
+                    try {
+                        var resp = await fetch(url, { credentials: 'same-origin' });
+                        var html = await resp.text();
+                        var tmp = document.createElement('div');
+                        tmp.innerHTML = html;
+
+                        var viewer = tmp.querySelector('.dicom-viewer-root');
+                        if (viewer) {
+                            leftEl.innerHTML = '';
+                            leftEl.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 {
+                            leftEl.innerHTML = '<p style="color:#fff; padding:1rem;">No viewer available</p>';
+                        }
+
+                        var viewerInTmp = tmp.querySelector('.dicom-viewer-root');
+                        if (viewerInTmp) viewerInTmp.remove();
+                        rightEl.innerHTML = tmp.innerHTML;
+
+                        bootstrap.Modal.getOrCreateInstance(fullModalEl).show();
+                    } catch (error) {
+                        console.error('Error loading fullscreen display set:', error);
+                        leftEl.innerHTML = '<p style="color:#fff; padding:1rem;">Failed to load viewer</p>';
+                        rightEl.innerHTML = '<p>Failed to load details.</p>';
+                    }
+                };
+            }
+
+            document.addEventListener('click', function (e) {
+                var modalBtn = e.target.closest('.view-displayset-modal');
+                if (modalBtn) {
+                    e.preventDefault();
+                    var modalUrl = modalBtn.getAttribute('data-url');
+                    var modalDsId = modalBtn.getAttribute('data-ds-id');
+                    window.loadDisplaysetModal(modalUrl, modalDsId);
+                    return;
+                }
+
+                var fsBtn = e.target.closest('.displayset-fullscreen-btn');
+                if (fsBtn) {
+                    e.preventDefault();
+                    var fsUrl = fsBtn.dataset.url;
+                    var fsDsId = fsBtn.dataset.dsId || null;
+                    if (typeof window.loadDisplaysetFullscreen === 'function') {
+                        window.loadDisplaysetFullscreen(fsUrl, fsDsId);
+                    }
+                }
+            });
+        }
+
     /**
      * For each "View Display Set" button:
      *  - If the page has an in-page viewer (importAnnotations_main_viewer available),