Refactor code structure for improved readability and maintainability

anatomy/static/js/anatomy.js

@@ -256,6 +256,12 @@ function clearableTextAreaSetup() {
 }
 
 function loadDicomViewer(images_to_load, annotations_to_load) {
+  // Skip loading old viewer if using new dv3d viewer (set on new_uploads page)
+  if (window.skipLoadDicomViewer) {
+    console.log("Skipping old loadDicomViewer - using dv3d instead");
+    return;
+  }
+  
   console.log("loadDicomViewer", images_to_load);
   let single_dicom = document.getElementById("single-dicom-viewer");
   if (single_dicom) {

atlas/templates/atlas/new_uploads.html

@@ -93,7 +93,7 @@
             </div>
         </div>
         <div class="card-body" style="position: relative; min-height: 450px;">
-            <div id="single-dicom-viewer" class="dicom-viewer-root" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;"></div>
+            <div id="upload-dicom-viewer" class="dicom-viewer-root" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;"></div>
         </div>
     </div>
 
@@ -158,6 +158,12 @@
 {% endblock %}
 
 {% block js %}
+    <!-- Set skip flag EARLY before any other scripts load to prevent old Cornerstone viewer from running -->
+    <script>
+        window.skipLoadDicomViewer = true;
+        console.log('skipLoadDicomViewer flag set before module scripts load');
+    </script>
+
     <script src="https://cdn.jsdelivr.net/npm/hash-wasm@4"></script>
     <script src="{% static 'js/upload_form_helpers.js' %}"></script>
     <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer"></script>
@@ -665,18 +671,17 @@
         async function showRecordsInViewer(records, label) {
             if (!records.length) return;
             console.log('showRecordsInViewer called with', records.length, 'records, label:', label);
-            console.log('First record:', records[0]);
+            // Pass the File objects directly to the viewer
-            // Try passing blob URLs directly (without wadouri: prefix) to dv3d
+            const files = records.map((record) => record.file);
-            const images = records.map((record) => record.objectUrl);
+            console.log('Files to load:', files);
-            console.log('Mapped images:', images);
             window.uploadPreview.currentTagsRecord = records[0];
-            
+
             document.getElementById("viewer-context").textContent = label;
             document.getElementById("viewer-tags-btn").disabled = false;
-            
+
-            // Directly mount dv3d viewer without triggering old viewer via event
+            // Load files directly into the viewer
-            await loadDv3dViewer(images, undefined);
+            await loadDv3dViewer(files);
-            
+
             // Focus the viewer card
             const viewerCard = document.querySelector(".card-header:has(#viewer-context)").closest(".card");
             if (viewerCard) {
@@ -849,15 +854,16 @@
             if (element) element.addEventListener(eventName, handler);
         }
 
-        async function loadDv3dViewer(images, annotations) {
+        async function loadDv3dViewer(files) {
             try {
-                console.log('loadDv3dViewer called with images:', images, 'length:', images ? images.length : 0);
+                console.log('loadDv3dViewer called with', files.length, 'files');
-                
+
-                // Wait for dv3d bundle to mount
+                // Wait for dv3d viewer API to be available
-                if (!window.mountDicomViewers) {
+                if (!window.loadDicomStackFromFiles && !window.loadDicomStackFromWadouriList) {
+                    console.log('Waiting for dv3d viewer API to load...');
                     await new Promise((resolve) => {
                         const checkInterval = setInterval(() => {
-                            if (window.mountDicomViewers) {
+                            if (window.loadDicomStackFromFiles || window.loadDicomStackFromWadouriList) {
                                 clearInterval(checkInterval);
                                 resolve();
                             }
@@ -866,22 +872,29 @@
                     });
                 }
 
-                const viewerElement = document.getElementById('single-dicom-viewer');
+                const viewerElement = document.getElementById('upload-dicom-viewer');
-                if (!viewerElement || !window.mountDicomViewers) {
+                if (!viewerElement) {
-                    console.warn('dv3d not ready or viewer element missing');
+                    console.warn('Viewer element not found');
                     return;
                 }
 
-                console.log('Clearing viewer element and mounting with', images.length, 'images');
+                //console.log('Clearing viewer element and loading files');
-                // Clear any old viewer content before mounting dv3d
+                //// Clear any old viewer content before mounting dv3d
-                viewerElement.innerHTML = '';
+                //viewerElement.innerHTML = '';
 
-                // Mount dv3d viewer with images
+                // Try to load files using the dv3d viewer API
-                window.mountDicomViewers(viewerElement, {
+                if (window.loadDicomStackFromFiles && typeof window.loadDicomStackFromFiles === 'function') {
-                    imageIds: images,
+                    console.log('Using loadDicomStackFromFiles API');
-                    annotations: annotations,
+                    window.loadDicomStackFromFiles(files);
-                });
+                    console.log('Files loaded into viewer');
-                console.log('dv3d viewer mounted successfully');
+                } else if (window.loadDicomStackFromWadouriList && typeof window.loadDicomStackFromWadouriList === 'function') {
+                    console.log('Using loadDicomStackFromWadouriList API');
+                    const wadouriList = files.map(f => 'wadouri:' + URL.createObjectURL(f));
+                    window.loadDicomStackFromWadouriList(wadouriList);
+                    console.log('WADO URIs loaded into viewer');
+                } else {
+                    console.warn('Neither loadDicomStackFromFiles nor loadDicomStackFromWadouriList available');
+                }
             } catch (err) {
                 console.error('Failed to load dv3d viewer:', err);
             }
@@ -931,7 +944,7 @@
                     return;
                 }
                 tbody.innerHTML = "";
-                
+
                 if (Object.keys(tags).length === 0) {
                     const row = document.createElement("tr");
                     row.innerHTML = "<td colspan='2' class='text-muted'>No tags found</td>";
@@ -952,7 +965,7 @@
                 } else {
                     document.getElementById("tags-warning").style.display = "none";
                 }
-                
+
                 const modal = new bootstrap.Modal(document.getElementById("dicomTagsModal"));
                 modal.show();
             } catch (err) {
@@ -970,8 +983,8 @@
                     const td = row.querySelector("td")?.textContent || "";
                     row.style.display =
                         !q || th.toLowerCase().includes(q) || td.toLowerCase().includes(q)
-                            ? ""
+                        ? ""
-                            : "none";
+                        : "none";
                 });
             }
         });
@@ -985,8 +998,8 @@
                     const td = row.querySelector("td")?.textContent || "";
                     row.style.display =
                         !q || th.toLowerCase().includes(q) || td.toLowerCase().includes(q)
-                            ? ""
+                        ? ""
-                            : "none";
+                        : "none";
                 });
             }
         });
@@ -1060,9 +1073,6 @@
             bindIfExists("uploadButton", "click", onUploadButtonClicked);
             bindIfExists("viewer-tags-btn", "click", showDicomTags);
 
-            // Prevent old Cornerstone viewer from interfering with dv3d on this page
-            window.skipLoadDicomViewer = true;
-
             window.addEventListener("beforeunload", async () => {
                 if (window.uploadPreview.ocrWorker) {
                     try { await window.uploadPreview.ocrWorker.terminate(); } catch (err) {}