Enhance case display with improved button interactions and add detailed instructions for reordering dicoms in help section

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"
@@ -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>

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 %}