From 125cbef6ef427a82fe08a17d2d4adf1a114c0e34 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 18 Aug 2025 10:18:12 +0100
Subject: [PATCH] Enhance case display with improved button interactions and
 add detailed instructions for reordering dicoms in help section

---
 atlas/templates/atlas/case_display_block.html | 118 ++++++++++--------
 atlas/templates/atlas/help.html               |  14 +++
 2 files changed, 83 insertions(+), 49 deletions(-)

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index f3fd94f6..8aaf2971 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -160,9 +160,17 @@
                 {% partial case-series %}
             </form>
             <span>
-                <a href="{% url 'atlas:user_uploads_case' case_id=case.pk %}">Import new uploads</a><br />
+                <button type="button"
+                        class="btn btn-info"
+                        onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
+                    Import new uploads
+                </button><br />
                 <details class="series-actions" id="series-actions">
-                    <summary>+ Manage Series</summary>
+                    <summary>
+                        <button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
+                            Manage Series
+                        </button>
+                    </summary>
                     <a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br />
                     <button hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
                             title="order dicom by slice location"
@@ -170,7 +178,7 @@
                             hx-swap="innerHTML"
                             hx-confirm="This will reorder all case series based upon slice location"
                     >
-                        Order all series dicoms by slice location
+                        Order dicoms by slice location
                     </button>
                     <button hx-post="{% url 'atlas:combine_series' %}"
                             title="merge series"
@@ -239,51 +247,51 @@
                         {% endif %}
 
     <!-- Series Findings -->
-<h5>Series Findings</h5>
-{% if case.ordered_series %}
-    {% for series in case.ordered_series %}
-        {% for finding in series.findings.all %}
-            <div class="finding-box" id="finding-box-{{ finding.pk }}" data-series="{{ series.pk }}">
-                <span>
-                    <a href="{{series.get_absolute_url}}?show_finding={{finding.pk}}">
-                        <button class="btn btn-primary btn-sm">View</button>
-                    </a>
-                    <button class="btn btn-secondary btn-sm view-finding-modal" data-finding-id="{{ finding.pk }}" data-series-id="{{ series.pk }}">
-                        View in Modal
-                    </button>
-                </span>
-                {% if finding.findings %}
-                    <span>
-                        Findings: {% for f in finding.findings.all %}
-                            {{f.get_link}},&nbsp;
-                        {% endfor %}
-                    </span>
-                {% endif %}
-                {% if finding.conditions %}
-                    <span>
-                        Conditions: {% for c in finding.conditions.all %}
-                            {{c.get_link}},&nbsp;
-                        {% endfor %}
-                    </span>
-                {% endif %}
-                {% if finding.structures %}
-                    <span>
-                        Structure: {% for s in finding.structures.all %}
-                            {{s.get_link}},&nbsp;
-                        {% endfor %}
-                    </span>
-                {% endif %}
-                {% if finding.description %}
-                    <span>
-                        Description: {{finding.description}}
-                    </span>
-                {% endif %}
-            </div>
-        {% endfor %}
-    {% endfor %}
-{% else %}
-    No series associated with case.
-{% endif %}
+                        <h5>Series Findings</h5>
+                        {% if case.ordered_series %}
+                            {% for series in case.ordered_series %}
+                                {% for finding in series.findings.all %}
+                                    <div class="finding-box" id="finding-box-{{ finding.pk }}" data-series="{{ series.pk }}">
+                                        <span>
+                                            <a href="{{series.get_absolute_url}}?show_finding={{finding.pk}}">
+                                                <button class="btn btn-primary btn-sm">View</button>
+                                            </a>
+                                            <button class="btn btn-secondary btn-sm view-finding-modal" data-finding-id="{{ finding.pk }}" data-series-id="{{ series.pk }}">
+                                                View in Modal
+                                            </button>
+                                        </span>
+                                        {% if finding.findings %}
+                                            <span>
+                                                Findings: {% for f in finding.findings.all %}
+                                                    {{f.get_link}},&nbsp;
+                                                {% endfor %}
+                                            </span>
+                                        {% endif %}
+                                        {% if finding.conditions %}
+                                            <span>
+                                                Conditions: {% for c in finding.conditions.all %}
+                                                    {{c.get_link}},&nbsp;
+                                                {% endfor %}
+                                            </span>
+                                        {% endif %}
+                                        {% if finding.structures %}
+                                            <span>
+                                                Structure: {% for s in finding.structures.all %}
+                                                    {{s.get_link}},&nbsp;
+                                                {% endfor %}
+                                            </span>
+                                        {% endif %}
+                                        {% if finding.description %}
+                                            <span>
+                                                Description: {{finding.description}}
+                                            </span>
+                                        {% endif %}
+                                    </div>
+                                {% endfor %}
+                            {% endfor %}
+                        {% else %}
+                            No series associated with case.
+                        {% endif %}
 
     <!-- Case Display Sets -->
                         <h5 class="mt-3">Case Display Sets</h5>
@@ -545,7 +553,7 @@
 
     // On submit, update the hidden inputs to match the new order
             document.getElementById("reorder-series-form").addEventListener("submit", function(e) {
-                const lis = document.querySelectorAll("#series-reorder-list li");
+                const lis = document.querynelectorAll("#series-reorder-list li");
                 lis.forEach((li, idx) => {
                     li.querySelector("input[name='series_order']").setAttribute("name", "series_order_" + idx);
                 });
@@ -616,6 +624,12 @@
                     btn.classList.toggle("btn-primary", checkbox.checked);
                     btn.classList.toggle("btn-outline-primary", !checkbox.checked);
                     btn.textContent = checkbox.checked ? "Selected" : "Select";
+                    // Highlight the series-block when selected
+                    if (checkbox.checked) {
+                        parent.classList.add("highlight-series");
+                    } else {
+                        parent.classList.remove("highlight-series");
+                    }
                 });
             });
 
@@ -713,4 +727,10 @@
         #series-reorder-list .drag-over {
             border-top: 2px solid #0d6efd;
         }
+        .series-actions[open] {
+            border: 2px solid #0d6efd;
+            border-radius: 6px;
+            padding: 8px;
+            margin-top: 8px;
+        }
     </style>
\ No newline at end of file
diff --git a/atlas/templates/atlas/help.html b/atlas/templates/atlas/help.html
index ba40b47e..21632630 100644
--- a/atlas/templates/atlas/help.html
+++ b/atlas/templates/atlas/help.html
@@ -56,5 +56,19 @@
     <p>To do so you will have to first export the files from the PACs system.</p>
     <p>Once uploaded the series will be available to be imported into cases
 
+    <h2>Cases</h2>
+    <h3>Ordering dicoms within a series</h3>
+    <p>Depending on how dicoms are exported images within a stack may appear in the wrong order. This is apparent when viewing the stacks/series as jumping of images.</p>
+    <p>In most cases this can be fixed by re-ordering based on series metadata (usually slice location).</p>
+    <p>It is possible to reorder all the stacks in a case at once, or to reorder individual stacks.</p>
+    <h4>Reorder all stacks in a case</h4>
+    <p>Go to the case page, click "Manage Series" then "Order dicoms by slice location". This will reorder all the stacks in the case based on slice location.</p>
+    <h4>Reorder individual stacks</h4>
+    <p>More ordering options (if the above does not work) are available on the series page.</p>
+    <p>These can be accessed by opening the "Series info" section and selecting the appropriate button.</p>
+
+
+
+
 
 {% endblock %}