ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance series viewer layout with improved author display and button interactions for DICOM operations

Browse Source
This commit is contained in:
Ross
2025-08-18 10:41:00 +01:00
parent f4ed53dedd
commit 61c3fb8a82
1 changed files with 119 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/series_viewer.html
+119 -38
View File
@@ -38,6 +38,7 @@ Associated case:
</details>
{% endif %}
{% endfor %}
<div>Author: {{ series.get_author_display }}</div>
{% with image_url_array_and_count=series.get_image_url_array_and_count %}
{% comment %} <div id="single-dicom-viewer" class="dicom-viewer" data-images="{{ image_url_array_and_count.0 }}" data-annotations=''>
@@ -124,6 +125,7 @@ Associated case:
{% endfor %}
</details>
{% if can_edit %}
<details>
<summary>Truncate series</summary>
@@ -133,7 +135,7 @@ Associated case:
<div role="alert" class="alert alert-warning">
<strong>Warning:</strong> Please note: if you have reordered the series this may result in the incorrect images being deleted.
</div>
Start <input id="lower-truncation-bound-input" type="number" value="1"> <button id="set-lower-truncation-bound-button">Set</button><br/>
End <input id="upper-truncation-bound-input"type="number" value="{{image_url_array_and_count.1}}"> <button id="set-upper-truncation-bound-button">Set</button><br/>
<button id="truncate-test-button">Test truncate</button>
@@ -145,23 +147,29 @@ Associated case:
{% endwith %}
<div>Author: {{ series.get_author_display }}</div>
{% if can_edit %}
<details>
<summary>Series info</summary>
<div>
<a href="{% url 'atlas:series_anonymise_dicom' pk=series.pk %}"
title="Anonymise dicom images">Anonymise dicoms</a><br />
<a href="{% url 'atlas:series_order_dicom' pk=series.pk %}" title="orders dicom by slice location">Order dicoms
by slice location</a>
<a href="{% url 'atlas:series_order_dicom_instance' pk=series.pk %}"
title="orders dicom by instance number">Order dicoms by instance number</a>
<a href="{% url 'atlas:series_order_dicom_SeriesInstanceUID' pk=series.pk %}"
title="orders dicom by instance number">Order dicoms by SeriesInstanceUID</a>
<a href="{% url 'atlas:series_order_upload_filename' pk=series.pk %}"
title="orders dicom by uploaded filename">Order by uploaded filename</a><br/>
<a href="{% url 'api-1:series_split_by_tag' series.pk 'ImageType' %}"
title="split series by dicom tag ImageType">Split the series by the ImageType dicom tag</a>
<div class="d-flex flex-wrap gap-2 mb-2">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_anonymise_dicom' pk=series.pk %}'" title="Anonymise dicom images">
Anonymise dicoms
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom' pk=series.pk %}'" title="orders dicom by slice location">
Order by slice location
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom_instance' pk=series.pk %}'" title="orders dicom by instance number">
Order by instance number
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom_SeriesInstanceUID' pk=series.pk %}'" title="orders dicom by SeriesInstanceUID">
Order by SeriesInstanceUID
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_upload_filename' pk=series.pk %}'" title="orders dicom by uploaded filename">
Order by uploaded filename
</button>
<button type="button" class="btn btn-outline-warning btn-sm" onclick="window.location.href='{% url 'api-1:series_split_by_tag' series.pk 'ImageType' %}'" title="split series by dicom tag ImageType">
Split by ImageType tag
</button>
</div>
<details>
<summary>
@@ -172,45 +180,44 @@ Associated case:
>
{% for image in series.get_images %}
[{{ image.id }}] <a href='{% url "atlas:series_image_dicom" image.pk %}'>{{image.image.url}}</a>, pos: {{image.position}}, {{image.upload_filename}}
{% if image.image %}
[{{image.get_file_size|filesizeformat}}]
{% endif %}
{{image.image_md5_hash}} ({{image.is_dicom}}) {{image.image_blake3_hash}}
<input type="checkbox" name="image-id" value="{{image.id}}">
<br />
{% comment %} {{image.get_dicom_info|safe}}<br /> {% endcomment %}
{% endfor %}
<button>Diff files</button>
</form>
<span id="temp"></span>
<span id="diff-controls">show <span id="diff-show-all" _="on click
log '1'
for row in .diff.rows
show row
end">all</span> <span id="diff-show-diff" _="
on click
log 'go'
for row in <.diff tr/>
log row.children[0].innerHTML
if row.children[0].innerHTML is empty
hide row
end
end
">diff</span></span>
</details>
<p>Total image size: {{series.get_total_image_size|filesizeformat}}</p>
<p><a href="{% url 'atlas:series_download' pk=series.pk %}">Download images</a></p>
<p>
<button type="button" class="btn btn-outline-success btn-sm" onclick="window.location.href='{% url 'atlas:series_download' pk=series.pk %}'">
Download images
</button>
</p>
</details>
<span id="diff-controls">show <span id="diff-show-all" _="on click
log '1'
for row in .diff.rows
show row
end">all</span> <span id="diff-show-diff" _="
on click
log 'go'
for row in <.diff tr/>
log row.children[0].innerHTML
if row.children[0].innerHTML is empty
hide row
end
end
">diff</span></span>
{% endif %}
<div id="clone-findings-modal"
class="modal modal-blur fade"
style="display: none"
@@ -386,4 +393,78 @@ Associated case:
#finding-form #hidden-form:focus-within {
box-shadow: 0 0 24px #198754aa;
}
#diff-show-all {
color: red;
cursor: pointer;
}
#diff-show-diff {
color: #0d6efd;
cursor: pointer;
}
details {
background: #23272b;
border-radius: 0.7em;
margin: 1.2em 0;
padding: 1.2em 1.5em 1em 1.5em;
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
border: 1px solid #343a40;
transition: box-shadow 0.2s;
}
details[open] {
box-shadow: 0 4px 24px rgba(13,110,253,0.10);
border-color: #0d6efd;
}
details > summary {
font-size: 1.15em;
font-weight: 600;
color: #0d6efd;
cursor: pointer;
margin: -1.2em -1.5em 1em -1.5em;
padding: 1.2em 1.5em 0.5em 1.5em;
border-bottom: 1px solid #343a40;
background: linear-gradient(90deg, #23272b 80%, #0d6efd22 100%);
border-radius: 0.7em 0.7em 0 0;
transition: background 0.2s, font-size 0.2s;
}
details:not([open]) {
padding-bottom: 0;
min-height: 0;
}
details:not([open]) > *:not(summary) {
display: none;
}
details:not([open]) > summary {
padding: 0.7em 1.2em 0.3em 1.2em;
}
details > summary:hover {
background: linear-gradient(90deg, #23272b 60%, #0d6efd44 100%);
color: #198754;
}
details > div, details > p, details > form, details > ul {
margin-top: 0.7em;
}
.alert {
margin-top: 1em;
}
/* Nested details */
details details {
background: #181a1b;
border: 1px solid #444;
margin: 0.7em 0;
box-shadow: none;
}
details details > summary {
color: #ffc107;
background: linear-gradient(90deg, #181a1b 80%, #ffc10722 100%);
border-bottom: 1px solid #444;
}
details details > summary:hover {
color: #0d6efd;
background: linear-gradient(90deg, #181a1b 60%, #0d6efd22 100%);
}
</style>