Enhance JSON display by integrating pretty JSON formatter in various templates

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>
 

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>
+                                            {% include 'atlas/partials/json_pretty.html' with json_value=ds.viewerstate title='Viewer State' %}
-                                <pre class="small">{{ ds.viewerstate|default:"{}" }}</pre>
                                         </div>
                                         <div>
-                                            <strong>Annotations:</strong>
+                                            {% include 'atlas/partials/json_pretty.html' with json_value=ds.annotations title='Annotations' %}
-                                <pre class="small">{{ ds.annotations|default:"{}" }}</pre>
                                         </div>
                                     </details>
                                 </div>

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>
+                {% include 'atlas/partials/json_pretty.html' with json_value=ds.viewerstate title='Viewer State' %}
-                <pre class="small">{{ ds.viewerstate|default:"{}" }}</pre>
             </div>
             <div>
-                <strong>Annotations:</strong>
+                {% include 'atlas/partials/json_pretty.html' with json_value=ds.annotations title='Annotations' %}
-                <pre class="small">{{ ds.annotations|default:"{}" }}</pre>
             </div>
         </details>
     </div>