Enhance JSON display by integrating pretty JSON formatter in various templates

2026-03-16 12:08:34 +00:00
parent 3ea51f976d
commit 1cadbab742
5 changed files with 80 additions and 78 deletions
@@ -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>
@@ -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>
@@ -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 %}"
@@ -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>