Refactor series viewer template for improved layout and usability; enhance findings display and action buttons
This commit is contained in:
Ross
@@ -1,225 +1,210 @@
|
||||
{% load crispy_forms_tags %}
|
||||
|
||||
<div>{{ series.modality}}, {{ series.examination }}, {{ series.plane }}, {{ series.contrast }}</div>
|
||||
<div>Description: {{series.description}}</div>
|
||||
|
||||
Associated case:
|
||||
{% for case in series.case.all %}
|
||||
<span id="case-link-{{ case.pk }}" class="case-item">
|
||||
<a href="{% url 'atlas:case_detail' pk=case.pk %}">{{case}}</a>
|
||||
{% if can_edit %}
|
||||
<button hx-post="{% url 'atlas:remove_series_from_case' series.pk case.pk %}"
|
||||
hx-target="#case-link-{{ case.pk }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Are you sure you want to remove this series from the case?"
|
||||
class="btn btn-link btn-sm button-unset remove-button">
|
||||
Remove
|
||||
</button>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% empty %}
|
||||
This series is not associated with any cases.
|
||||
{% if can_edit %}
|
||||
<details>
|
||||
<summary>Add Series to Case</summary>
|
||||
<form hx-post="{% url 'atlas:add_series_to_case' series.pk %}"
|
||||
hx-target="#add-series-to-case-result"
|
||||
hx-swap="innerHTML">
|
||||
{% csrf_token %}
|
||||
<label for="case-select">Select Case:</label>
|
||||
<select name="case_id" id="case-select" required>
|
||||
{% for case in available_cases %}
|
||||
<option value="{{ case.pk }}">{{ case.title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">Add to Case</button>
|
||||
</form>
|
||||
<div id="add-series-to-case-result"></div>
|
||||
</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=''>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div id="root" class="dicom-viewer-root" data-images="{{ image_url_array_and_count.0 }}"
|
||||
style="max-width: 1000px; height: 600px; box-sizing: border-box; background: #222;"
|
||||
data-auto-cache-stack=false
|
||||
></div>
|
||||
|
||||
|
||||
{% if can_edit %}
|
||||
{% if editing_finding < 1 %}
|
||||
<button id="add-finding-button">Add finding</button>
|
||||
<button id="clone-finding-button" title="Click to copy the details of a finding that is already associated with the series/case"
|
||||
hx-get="{% url 'atlas:series_finding_related' series.pk %}"
|
||||
hx-target="#clone-findings-modal"
|
||||
hx-trigger="click"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#clone-findings-modal"
|
||||
>Clone existing finding</button>
|
||||
{% endif %}
|
||||
<button id="reset-viewport-button" class="btn btn-secondary">Reset viewport</button>
|
||||
<div id="finding-form">
|
||||
<div class="hide" id="hidden-form">
|
||||
{% if editing_finding > 0 %}
|
||||
<h3>Editing Finding</h3>
|
||||
<p>Editing finding with ID: {{editing_finding}}</p>
|
||||
{% else %}
|
||||
<h3>Add Finding</h3>
|
||||
<p>Click the button below to add a new finding.</p>
|
||||
{% endif %}
|
||||
<form method="post" id="series_finding_form">
|
||||
{% csrf_token %}
|
||||
{{series_finding_form|crispy}}
|
||||
<input type="submit" value="Submit" class="btn btn-lg btn-success fw-bold px-4 py-2" style="font-size: 1.2rem;">
|
||||
<button id="cancel-add-finding-button">Cancel</button>
|
||||
</form>
|
||||
<div class="container my-4">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body d-flex flex-column flex-md-row justify-content-between align-items-start gap-3">
|
||||
<div>
|
||||
<h4 class="card-title mb-1">Series: {{ series.modality }} - {{ series.examination }}</h4>
|
||||
<div class="text-muted small">{{ series.plane }}, {{ series.contrast }}</div>
|
||||
<div class="mt-2">Description: <span class="text-break">{{ series.description }}</span></div>
|
||||
<div class="mt-2 text-muted">Author: {{ series.get_author_display }}</div>
|
||||
</div>
|
||||
<div class="ms-auto d-flex gap-2">
|
||||
<a class="btn btn-outline-secondary btn-sm" href="{% url 'atlas:case_detail' pk=series.pk %}">View series</a>
|
||||
{% if can_edit %}
|
||||
<button id="reset-viewport-button" class="btn btn-secondary btn-sm">Reset viewport</button>
|
||||
{% else %}
|
||||
<button id="reset-viewport-button" class="btn btn-secondary btn-sm">Reset viewport</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<button id="reset-viewport-button">Reset viewport</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<details class="styled-detail open">
|
||||
<summary>Findings</summary>
|
||||
<div class="row">
|
||||
<div class="col-md-8 mb-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-2">
|
||||
{% with image_url_array_and_count=series.get_image_url_array_and_count %}
|
||||
<div id="root" class="dicom-viewer-root w-100" data-images="{{ image_url_array_and_count.0 }}"
|
||||
style="height: 600px; box-sizing: border-box; background: #222;" data-auto-cache-stack=false>
|
||||
</div>
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="card-footer bg-white d-flex flex-wrap gap-2 align-items-center">
|
||||
{% if can_edit and editing_finding < 1 %}
|
||||
<button id="add-finding-button" class="btn btn-primary btn-sm">Add finding</button>
|
||||
<button id="clone-finding-button" class="btn btn-outline-primary btn-sm"
|
||||
title="Clone an existing finding"
|
||||
hx-get="{% url 'atlas:series_finding_related' series.pk %}"
|
||||
hx-target="#clone-findings-modal"
|
||||
hx-trigger="click"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#clone-findings-modal">Clone finding</button>
|
||||
{% endif %}
|
||||
<div class="ms-auto text-muted small">{{ series.get_image_count }} images</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for finding in series.findings.all %}
|
||||
<div class="finding-box">
|
||||
<button id="finding-{{finding.pk}}-3d" class="view-finding-button-3d" data-annotationjson3d='{{finding.annotation_json_3d}}' data-viewerstatejson='{{finding.viewer_state_3d}}' data-findingid='{{finding.pk}}'>Click to view</button>
|
||||
<div class="mt-3">
|
||||
<details class="styled-detail open">
|
||||
<summary>Findings</summary>
|
||||
<div class="mt-2">
|
||||
{% for finding in series.findings.all %}
|
||||
<div class="card mb-2">
|
||||
<div class="card-body d-flex flex-column flex-md-row justify-content-between gap-2">
|
||||
<div>
|
||||
<button id="finding-{{finding.pk}}-3d" class="btn btn-sm btn-outline-secondary view-finding-button-3d me-2"
|
||||
data-annotationjson3d='{{finding.annotation_json_3d}}' data-viewerstatejson='{{finding.viewer_state_3d}}' data-findingid='{{finding.pk}}'>View 3D</button>
|
||||
<strong>Finding(s):</strong>
|
||||
{% for f in finding.findings.all %}{{f.get_link}}{% endfor %}<br />
|
||||
<strong>Structure(s):</strong> {% for s in finding.structures.all %}{{s.get_link}}{% endfor %}<br />
|
||||
<strong>Condition(s):</strong> {% for s in finding.conditions.all %}{{s.get_link}}{% endfor %}<br />
|
||||
<div class="mt-2">{{finding.description}}</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
{% if request.user.is_superuser %}
|
||||
<button class="btn btn-sm btn-outline-dark mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#extra-{{finding.pk}}">Raw JSON</button>
|
||||
<div class="collapse" id="extra-{{finding.pk}}">
|
||||
<pre class="small bg-light p-2">{{finding.annotation_json}}</pre>
|
||||
<pre class="small bg-light p-2">{{finding.viewport_json}}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if can_edit %}
|
||||
<div class="d-flex flex-column">
|
||||
<a href="{% url 'atlas:series_edit_finding' pk=series.pk finding_pk=finding.pk %}" class="btn btn-sm btn-outline-primary mb-1">Edit</a>
|
||||
<a href="{% url 'atlas:delete_finding' pk=finding.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<p class="text-muted">No findings available.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="view-finding-details">
|
||||
Finding(s): {% for f in finding.findings.all %}{{f.get_link}}{% endfor %}<br />
|
||||
Structure(s): {% for s in finding.structures.all %}{{s.get_link}}{% endfor %}<br />
|
||||
Condition(s): {% for s in finding.conditions.all %}{{s.get_link}}{% endfor %}<br />
|
||||
Description: {{finding.description}}<br />
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">Cases</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
{% for case in series.case.all %}
|
||||
<li id="case-link-{{ case.pk }}" class="list-group-item d-flex justify-content-between align-items-center case-item">
|
||||
<a href="{% url 'atlas:case_detail' pk=case.pk %}">{{case}}</a>
|
||||
{% if can_edit %}
|
||||
<button hx-post="{% url 'atlas:remove_series_from_case' series.pk case.pk %}"
|
||||
hx-target="#case-link-{{ case.pk }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Are you sure you want to remove this series from the case?"
|
||||
class="btn btn-link btn-sm text-danger remove-button">Remove</button>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% empty %}
|
||||
<li class="list-group-item">This series is not associated with any cases.</li>
|
||||
{% if can_edit %}
|
||||
<li class="list-group-item">
|
||||
<details>
|
||||
<summary>Add Series to Case</summary>
|
||||
<form hx-post="{% url 'atlas:add_series_to_case' series.pk %}" hx-target="#add-series-to-case-result" hx-swap="innerHTML" class="mt-2">
|
||||
{% csrf_token %}
|
||||
<div class="mb-2">
|
||||
<label for="case-select" class="form-label">Select Case</label>
|
||||
<select name="case_id" id="case-select" class="form-select" required>
|
||||
{% for case in available_cases %}
|
||||
<option value="{{ case.pk }}">{{ case.title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Add to Case</button>
|
||||
</form>
|
||||
<div id="add-series-to-case-result"></div>
|
||||
</details>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if request.user.is_superuser %}
|
||||
<span _="on click toggle .hidden on next .extra-details">+</span>
|
||||
<div class="hidden extra-details">
|
||||
<h4>Annotation JSON</h4>
|
||||
<pre>{{finding.annotation_json}}</pre>
|
||||
<h4>Viewport JSON</h4>
|
||||
<pre>{{finding.viewport_json}}</pre>
|
||||
<h4>Image ID</h4>
|
||||
<pre>{{finding.current_image_id_index}}</pre>
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">Actions</div>
|
||||
<div class="card-body d-flex flex-column gap-2">
|
||||
<a class="btn btn-outline-primary btn-sm" href="{% url 'atlas:series_anonymise_dicom' pk=series.pk %}">Anonymise dicoms</a>
|
||||
<a class="btn btn-outline-primary btn-sm" href="{% url 'atlas:series_order_dicom' pk=series.pk %}">Order by slice location</a>
|
||||
<a class="btn btn-outline-primary btn-sm" href="{% url 'atlas:series_order_dicom_instance' pk=series.pk %}">Order by instance number</a>
|
||||
<a class="btn btn-outline-primary btn-sm" href="{% url 'atlas:series_order_dicom_SeriesInstanceUID' pk=series.pk %}">Order by SeriesInstanceUID</a>
|
||||
<a class="btn btn-outline-primary btn-sm" href="{% url 'atlas:series_order_upload_filename' pk=series.pk %}">Order by uploaded filename</a>
|
||||
<a class="btn btn-outline-warning btn-sm" href="{% url 'api-1:series_split_by_tag' series.pk 'ImageType' %}">Split by ImageType tag</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>3D Annotation JSON</h4>
|
||||
<pre>{{finding.annotation_json_3d}}</pre>
|
||||
<h4>Viewer State</h4>
|
||||
<pre>{{finding.viewer_state_3d}}</pre>
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">Finding form</div>
|
||||
<div class="card-body">
|
||||
<div id="finding-form">
|
||||
<div class="hide" id="hidden-form">
|
||||
{% if editing_finding > 0 %}
|
||||
<h5>Editing Finding</h5>
|
||||
<p class="small">Editing finding with ID: {{editing_finding}}</p>
|
||||
{% else %}
|
||||
<h5>Add Finding</h5>
|
||||
<p class="small">Click the button below to add a new finding.</p>
|
||||
{% endif %}
|
||||
<form method="post" id="series_finding_form">
|
||||
{% csrf_token %}
|
||||
{{series_finding_form|crispy}}
|
||||
<div class="d-flex gap-2 mt-2">
|
||||
<input type="submit" value="Submit" class="btn btn-success btn-sm">
|
||||
<button id="cancel-add-finding-button" class="btn btn-secondary btn-sm">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if can_edit %}
|
||||
<a href="{% url 'atlas:series_edit_finding' pk=series.pk finding_pk=finding.pk %}" class="edit-finding-link">Edit</a>
|
||||
<a href="{% url 'atlas:delete_finding' pk=finding.pk %}" class="delete-finding-link">Delete</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<p>No findings available.</p>
|
||||
{% endfor %}
|
||||
</details>
|
||||
|
||||
{% if can_edit %}
|
||||
<details class="styled-detail">
|
||||
<summary>Truncate series</summary>
|
||||
<p>
|
||||
This will limit the series to the selected bounds (the rest of the images will be deleted). This is useful when you have a large volume of which only a small area is relevant to the case. NOTE: once deleted the images cannot be recovered on the site (they would have to be reuploaded if required). Make sure your images are shown in the correct order above and use test the test truncate button first.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<button id="truncate-button">Trucate series</button>
|
||||
<div id="truncate-output"></div>
|
||||
|
||||
</details>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
|
||||
|
||||
{% if can_edit %}
|
||||
<details class="styled-detail">
|
||||
<summary>Series info</summary>
|
||||
<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>
|
||||
{% if can_edit %}
|
||||
<div class="card">
|
||||
<div class="card-header">Truncate series</div>
|
||||
<div class="card-body">
|
||||
<p class="small">Limit the series to the selected bounds (the rest of the images will be deleted). This action is irreversible on site.</p>
|
||||
<div class="alert alert-warning"><strong>Warning:</strong> If you have reordered the series this may remove the wrong images.</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Start</label>
|
||||
<div class="input-group">
|
||||
<input id="lower-truncation-bound-input" type="number" class="form-control form-control-sm" value="1">
|
||||
<button id="set-lower-truncation-bound-button" class="btn btn-outline-secondary btn-sm">Set</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">End</label>
|
||||
<div class="input-group">
|
||||
<input id="upper-truncation-bound-input" type="number" class="form-control form-control-sm" value="{{image_url_array_and_count.1}}">
|
||||
<button id="set-upper-truncation-bound-button" class="btn btn-outline-secondary btn-sm">Set</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button id="truncate-test-button" class="btn btn-sm btn-outline-primary">Test truncate</button>
|
||||
<button id="truncate-button" class="btn btn-sm btn-danger">Truncate series</button>
|
||||
</div>
|
||||
<div id="truncate-output" class="mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<details>
|
||||
<summary>
|
||||
Image details
|
||||
</summary>
|
||||
<form hx-post="{% url 'atlas:image_diff' %}"
|
||||
hx-target="#temp"
|
||||
>
|
||||
{% 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 />
|
||||
{% 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>
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone-findings-modal"
|
||||
class="modal modal-blur fade"
|
||||
style="display: none"
|
||||
aria-hidden="false"
|
||||
tabindex="-1">
|
||||
<div id="clone-findings-modal" class="modal modal-blur fade" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered related-finding-modal" style="max-width: 700px;">
|
||||
<div class="modal-content"></div>
|
||||
</div>
|
||||
@@ -359,6 +344,8 @@ Associated case:
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endwith %}
|
||||
|
||||
<style>
|
||||
.case-item {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
Reference in New Issue
Block a user