Implement initAnatomyFragment function for HTMX fragment swaps to initialize DICOM viewers

anatomy/static/js/anatomy.js

@@ -341,6 +341,26 @@ function loadJsonToolStateOnCurrentImage(element, json) {
 
 }
 
+// Called by HTMX after a fragment swap; initializes any dicom-image-legacy viewers
+window.initAnatomyFragment = function(fragmentRoot) {
+  try {
+    // If a fragment root is an element (hx-on passes `this`), search within it.
+    const root = fragmentRoot || document;
+    const imgs = (root.querySelectorAll) ? root.querySelectorAll('.dicom-image-legacy') : [];
+    imgs.forEach((el) => {
+      try {
+        if (typeof window.setUpDicomLegacy === 'function') {
+          window.setUpDicomLegacy(el);
+        }
+      } catch (err) {
+        console.warn('initAnatomyFragment: setUpDicomLegacy failed for element', el, err);
+      }
+    });
+  } catch (err) {
+    console.warn('initAnatomyFragment error', err);
+  }
+}
+
 async function setUpDicomLegacy(element) {
   console.log("setUpDicom (original)", element);
 

anatomy/templates/anatomy/partials/exam_review_question_fragment.html

@@ -1,4 +1,4 @@
-<div class="card mb-3" hx-on="htmx:afterOnLoad: (e) => { const el = document.getElementById('anatomy-dicom-image'); if (el && typeof window.setUpDicomLegacy === 'function') { try { window.setUpDicomLegacy(el); } catch(err) { console.warn('setUpDicomLegacy failed on fragment load', err); } } }">
+<div class="card mb-3" hx-on="htmx:afterSwap: initAnatomyFragment(this)">
     <div class="card-body">
         <p class="lead">{{ question.question_type }}</p>
         <div id="anatomy-dicom-image" class="dicom-image-legacy" data-url="{{ question.get_image_url }}"