From 1cadbab7423f70d921ff7cfa327ad442348d9105 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 16 Mar 2026 12:08:34 +0000
Subject: [PATCH] Enhance JSON display by integrating pretty JSON formatter in
 various templates

---
 .../templates/anatomy/question_detail.html    |  8 +-
 atlas/templates/atlas/case_display_block.html |  6 +-
 .../atlas/case_displayset_modal.html          |  6 +-
 .../atlas/partials/displayset_row.html        | 40 ++++----
 .../templates/atlas/partials/json_pretty.html | 98 +++++++++----------
 5 files changed, 80 insertions(+), 78 deletions(-)

diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html
index b1f217a5..5cd03b37 100644
--- a/anatomy/templates/anatomy/question_detail.html
+++ b/anatomy/templates/anatomy/question_detail.html
@@ -169,7 +169,13 @@
                     <div class="mt-3">
                         <details>
                             <summary class="small">Annotation JSON</summary>
-                            <div class="mt-2 small">{% if question.image_annotations %}<pre class="mb-0">{{ question.image_annotations }}</pre>{% else %}No saved annotations.{% endif %}</div>
+                            <div class="mt-2 small">
+                                {% if question.image_annotations %}
+                                    {% include 'atlas/partials/json_pretty.html' with json_value=question.image_annotations title='Image annotations' %}
+                                {% else %}
+                                    No saved annotations.
+                                {% endif %}
+                            </div>
                         </details>
                     </div>
 
diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 689ec95a..17bbfd8a 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -743,12 +743,10 @@
                                     <details>
                                         <summary class="small text-muted" style="cursor:pointer;">Show advanced (viewer state & annotations)</summary>
                                         <div>
-                                            <strong>Viewer State:</strong>
-                                <pre class="small">{{ ds.viewerstate|default:"{}" }}</pre>
+                                            {% include 'atlas/partials/json_pretty.html' with json_value=ds.viewerstate title='Viewer State' %}
                                         </div>
                                         <div>
-                                            <strong>Annotations:</strong>
-                                <pre class="small">{{ ds.annotations|default:"{}" }}</pre>
+                                            {% include 'atlas/partials/json_pretty.html' with json_value=ds.annotations title='Annotations' %}
                                         </div>
                                     </details>
                                 </div>
diff --git a/atlas/templates/atlas/case_displayset_modal.html b/atlas/templates/atlas/case_displayset_modal.html
index eabc755e..a443991d 100644
--- a/atlas/templates/atlas/case_displayset_modal.html
+++ b/atlas/templates/atlas/case_displayset_modal.html
@@ -67,12 +67,10 @@
         <details>
             <summary class="small text-muted" style="cursor:pointer;">Show advanced (viewer state & annotations)</summary>
             <div>
-                <strong>Viewer State:</strong>
-                <pre class="small">{{ ds.viewerstate|default:"{}" }}</pre>
+                {% include 'atlas/partials/json_pretty.html' with json_value=ds.viewerstate title='Viewer State' %}
             </div>
             <div>
-                <strong>Annotations:</strong>
-                <pre class="small">{{ ds.annotations|default:"{}" }}</pre>
+                {% include 'atlas/partials/json_pretty.html' with json_value=ds.annotations title='Annotations' %}
             </div>
         </details>
     </div>
diff --git a/atlas/templates/atlas/partials/displayset_row.html b/atlas/templates/atlas/partials/displayset_row.html
index 5bfead5b..fd365b8b 100644
--- a/atlas/templates/atlas/partials/displayset_row.html
+++ b/atlas/templates/atlas/partials/displayset_row.html
@@ -71,26 +71,26 @@
                 hx-after
                 class="btn btn-warning btn-sm"
                 onclick="
-                    this.style.display='none';
-                    var li = this.closest('li');
-                    var ul = li.parentNode;
-                    ul.insertBefore(li, ul.firstChild);
-                    li.scrollIntoView({behavior: 'smooth', block: 'center'});
-                    setTimeout(function() {
-                        var form = document.querySelector('#displayset-edit-form-{{ ds.pk }} form');
-                        if (form) {
-                            var cancelBtn = document.createElement('button');
-                            cancelBtn.type = 'button';
-                            cancelBtn.className = 'btn btn-secondary btn-sm ms-2';
-                            cancelBtn.textContent = 'Cancel';
-                            cancelBtn.onclick = function() {
-                                document.querySelector('#displayset-edit-form-{{ ds.pk }}').innerHTML = '';
-                                document.querySelector('#displayset-{{ ds.pk }}-edit-btn').style.display = '';
-                            };
-                            form.appendChild(cancelBtn);
-                        }
-                    }, 100);
-                "
+                         this.style.display='none';
+                         var li = this.closest('li');
+                         var ul = li.parentNode;
+                         ul.insertBefore(li, ul.firstChild);
+                         li.scrollIntoView({behavior: 'smooth', block: 'center'});
+                         setTimeout(function() {
+                         var form = document.querySelector('#displayset-edit-form-{{ ds.pk }} form');
+                         if (form) {
+                         var cancelBtn = document.createElement('button');
+                         cancelBtn.type = 'button';
+                         cancelBtn.className = 'btn btn-secondary btn-sm ms-2';
+                         cancelBtn.textContent = 'Cancel';
+                         cancelBtn.onclick = function() {
+                         document.querySelector('#displayset-edit-form-{{ ds.pk }}').innerHTML = '';
+                         document.querySelector('#displayset-{{ ds.pk }}-edit-btn').style.display = '';
+                         };
+                         form.appendChild(cancelBtn);
+                         }
+                         }, 100);
+                        "
             >Edit</button>
             <button
                 hx-delete="{% url 'atlas:case_displaysets_delete' ds.pk %}"
diff --git a/atlas/templates/atlas/partials/json_pretty.html b/atlas/templates/atlas/partials/json_pretty.html
index 07e8e4ca..55453629 100644
--- a/atlas/templates/atlas/partials/json_pretty.html
+++ b/atlas/templates/atlas/partials/json_pretty.html
@@ -10,69 +10,69 @@
   <div class="json-container small" style="max-height:360px; overflow:auto; font-family: monospace; background: #f8f9fa; padding: .5rem; border-radius: .25rem;"></div>
 
   <script>
-  (function(){
+    (function(){
     // Parse template-provided JSON value into a JS object
-    var obj;
-    try{
-      obj = {{ json_value|default:"{}"|safe }};
-    }catch(e){
-      try{ obj = JSON.parse(String({{ json_value|default:"{}"|safe }})); }catch(e){ obj = {}; }
-    }
+      var obj;
+      try{
+        obj = {{ json_value|default:"{}"|safe }};
+      }catch(e){
+        try{ obj = JSON.parse(String({{ json_value|default:"{}"|safe }})); }catch(e){ obj = {}; }
+      }
 
-    var container = document.currentScript.previousElementSibling;
-    var btnCopy = document.currentScript.parentNode.querySelector('.btn-copy-json');
-    var btnToggle = document.currentScript.parentNode.querySelector('.btn-toggle-json');
+      var container = document.currentScript.previousElementSibling;
+      var btnCopy = document.currentScript.parentNode.querySelector('.btn-copy-json');
+      var btnToggle = document.currentScript.parentNode.querySelector('.btn-toggle-json');
 
-    function renderWithFormatter(depth){
-      container.innerHTML = '';
-      if (window.JSONFormatter){
-        try{
-          var fmt = new JSONFormatter(obj, depth || 1, {hoverPreviewEnabled: false, animateOpen: false});
-          container.appendChild(fmt.render());
-          return fmt;
-        }catch(e){
+      function renderWithFormatter(depth){
+        container.innerHTML = '';
+        if (window.JSONFormatter){
+          try{
+            var fmt = new JSONFormatter(obj, depth || 1, {hoverPreviewEnabled: false, animateOpen: false});
+            container.appendChild(fmt.render());
+            return fmt;
+          }catch(e){
+            container.textContent = JSON.stringify(obj, null, 2);
+            return null;
+          }
+        } else {
           container.textContent = JSON.stringify(obj, null, 2);
           return null;
         }
-      } else {
-        container.textContent = JSON.stringify(obj, null, 2);
-        return null;
       }
-    }
 
     // Dynamic load of json-formatter-js if not already present
-    function ensureFormatter(cb){
-      if (window.JSONFormatter) return cb();
-      var s = document.createElement('script');
-      s.src = 'https://unpkg.com/json-formatter-js@2.3.3/dist/json-formatter.umd.js';
-      s.onload = function(){ setTimeout(cb, 0); };
-      s.onerror = function(){ cb(); };
-      document.head.appendChild(s);
-    }
+      function ensureFormatter(cb){
+        if (window.JSONFormatter) return cb();
+        var s = document.createElement('script');
+        s.src = 'https://unpkg.com/json-formatter-js@2.3.3/dist/json-formatter.umd.js';
+        s.onload = function(){ setTimeout(cb, 0); };
+        s.onerror = function(){ cb(); };
+        document.head.appendChild(s);
+      }
 
     // Keep current formatter instance so we can re-render collapsed/expanded
-    var currentFormatter = null;
-    ensureFormatter(function(){ currentFormatter = renderWithFormatter(1); });
+      var currentFormatter = null;
+      ensureFormatter(function(){ currentFormatter = renderWithFormatter(1); });
 
-    btnToggle.addEventListener('click', function(){
+      btnToggle.addEventListener('click', function(){
       // Toggle between collapsed (depth=1) and expanded (depth=0 => fully expanded)
-      if (btnToggle.dataset.state === 'expanded'){
-        currentFormatter = renderWithFormatter(1);
-        btnToggle.dataset.state = 'collapsed';
-        btnToggle.textContent = 'Show';
-      } else {
-        currentFormatter = renderWithFormatter(0);
-        btnToggle.dataset.state = 'expanded';
-        btnToggle.textContent = 'Hide';
-      }
-    });
+        if (btnToggle.dataset.state === 'expanded'){
+          currentFormatter = renderWithFormatter(1);
+          btnToggle.dataset.state = 'collapsed';
+          btnToggle.textContent = 'Show';
+        } else {
+          currentFormatter = renderWithFormatter(0);
+          btnToggle.dataset.state = 'expanded';
+          btnToggle.textContent = 'Hide';
+        }
+      });
 
-    btnCopy.addEventListener('click', function(){
-      var text = JSON.stringify(obj, null, 2);
-      if (navigator.clipboard){ navigator.clipboard.writeText(text).catch(function(){}); }
-      else { var ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');}catch(e){} document.body.removeChild(ta); }
-    });
+      btnCopy.addEventListener('click', function(){
+        var text = JSON.stringify(obj, null, 2);
+        if (navigator.clipboard){ navigator.clipboard.writeText(text).catch(function(){}); }
+        else { var ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');}catch(e){} document.body.removeChild(ta); }
+      });
 
-  })();
+    })();
   </script>
 </div>