feat: Refactor series tag consistency modal with improved UI and analysis functionality
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Ross
@@ -1,107 +1,194 @@
|
||||
{% load django_htmx %}
|
||||
<div id="series-tag-consistency-panel" class="d-flex flex-column gap-2">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
<button type="button"
|
||||
class="btn btn-outline-info btn-sm"
|
||||
hx-get="{% url 'atlas:series_tag_consistency' pk=series.pk %}?analyze=1"
|
||||
hx-target="#series-tag-consistency-panel"
|
||||
hx-swap="outerHTML">
|
||||
Analyze tag consistency
|
||||
</button>
|
||||
<div id="series-tag-consistency-panel">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Series Tag Consistency</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body d-flex flex-column gap-3">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
<button type="button"
|
||||
class="btn btn-outline-info btn-sm"
|
||||
hx-get="{% url 'atlas:series_tag_consistency' pk=series.pk %}?analyze=1"
|
||||
hx-target="#series-tag-consistency-panel"
|
||||
hx-swap="outerHTML">
|
||||
Re-run analysis
|
||||
</button>
|
||||
{% if analyze_requested %}
|
||||
<span class="small text-muted">Scanned {{ image_count }} image{{ image_count|pluralize }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="tag-consistency-split-result"></div>
|
||||
|
||||
{% if analyze_requested %}
|
||||
<span class="small text-muted">Scanned {{ image_count }} image{{ image_count|pluralize }}</span>
|
||||
<div class="small d-flex flex-wrap gap-2">
|
||||
<span class="badge text-bg-success">Same: {{ same_tags|length }}</span>
|
||||
<span class="badge text-bg-warning">Different: {{ different_tags|length }}</span>
|
||||
<span class="badge text-bg-secondary">Missing in some: {{ partial_tags|length }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="tag-consistency-filter-{{ series.pk }}" class="form-label form-label-sm mb-1">Filter tags</label>
|
||||
<input id="tag-consistency-filter-{{ series.pk }}" type="text" class="form-control form-control-sm" placeholder="Type to filter by tag name or value">
|
||||
</div>
|
||||
|
||||
<details class="styled-detail" open>
|
||||
<summary>Different tags (highlighted)</summary>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Unique values</th>
|
||||
<th>Sample values</th>
|
||||
<th>Split</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in different_tags %}
|
||||
<tr class="table-warning" data-filter-row="1">
|
||||
<td>{{ row.tag_name }}</td>
|
||||
<td>{{ row.unique_count }}</td>
|
||||
<td>{{ row.sample_values|join:", " }}</td>
|
||||
<td>
|
||||
{% if can_split %}
|
||||
<form method="post"
|
||||
action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
|
||||
hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
|
||||
hx-target="#tag-consistency-split-result"
|
||||
hx-swap="innerHTML">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="dicom_tag" value="{{ row.tag_name }}">
|
||||
<button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span class="text-muted small">No split access</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4" class="text-muted">No tags vary across all images.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="styled-detail">
|
||||
<summary>Same tags</summary>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Value</th>
|
||||
<th>Split</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in same_tags %}
|
||||
<tr class="table-success" data-filter-row="1">
|
||||
<td>{{ row.tag_name }}</td>
|
||||
<td>{{ row.sample_values.0 }}</td>
|
||||
<td>
|
||||
{% if can_split %}
|
||||
<form method="post"
|
||||
action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
|
||||
hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
|
||||
hx-target="#tag-consistency-split-result"
|
||||
hx-swap="innerHTML">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="dicom_tag" value="{{ row.tag_name }}">
|
||||
<button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span class="text-muted small">No split access</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="3" class="text-muted">No uniform tags found across all images.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="styled-detail">
|
||||
<summary>Missing in some images</summary>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Present in</th>
|
||||
<th>Unique values</th>
|
||||
<th>Split</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in partial_tags %}
|
||||
<tr class="table-secondary" data-filter-row="1">
|
||||
<td>{{ row.tag_name }}</td>
|
||||
<td>{{ row.present_count }}/{{ image_count }}</td>
|
||||
<td>{{ row.unique_count }}</td>
|
||||
<td>
|
||||
{% if can_split %}
|
||||
<form method="post"
|
||||
action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
|
||||
hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
|
||||
hx-target="#tag-consistency-split-result"
|
||||
hx-swap="innerHTML">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="dicom_tag" value="{{ row.tag_name }}">
|
||||
<button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span class="text-muted small">No split access</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4" class="text-muted">All scanned tags were present in every image.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
<p class="small text-muted mb-0">Run analysis to quickly highlight tags that are the same or different across the series.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if analyze_requested %}
|
||||
<div class="small d-flex flex-wrap gap-2">
|
||||
<span class="badge text-bg-success">Same: {{ same_tags|length }}</span>
|
||||
<span class="badge text-bg-warning">Different: {{ different_tags|length }}</span>
|
||||
<span class="badge text-bg-secondary">Missing in some: {{ partial_tags|length }}</span>
|
||||
</div>
|
||||
|
||||
<details class="styled-detail" open>
|
||||
<summary>Different tags (highlighted)</summary>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Unique values</th>
|
||||
<th>Sample values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in different_tags %}
|
||||
<tr class="table-warning">
|
||||
<td>{{ row.tag_name }}</td>
|
||||
<td>{{ row.unique_count }}</td>
|
||||
<td>{{ row.sample_values|join:", " }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="3" class="text-muted">No tags vary across all images.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="styled-detail">
|
||||
<summary>Same tags</summary>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in same_tags %}
|
||||
<tr class="table-success">
|
||||
<td>{{ row.tag_name }}</td>
|
||||
<td>{{ row.sample_values.0 }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="2" class="text-muted">No uniform tags found across all images.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="styled-detail">
|
||||
<summary>Missing in some images</summary>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Present in</th>
|
||||
<th>Unique values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in partial_tags %}
|
||||
<tr class="table-secondary">
|
||||
<td>{{ row.tag_name }}</td>
|
||||
<td>{{ row.present_count }}/{{ image_count }}</td>
|
||||
<td>{{ row.unique_count }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="3" class="text-muted">All scanned tags were present in every image.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
<p class="small text-muted mb-0">Run analysis to quickly highlight tags that are the same or different across the series.</p>
|
||||
{% endif %}
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const filterInput = document.getElementById("tag-consistency-filter-{{ series.pk }}");
|
||||
if (!filterInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = document.querySelectorAll("#series-tag-consistency-panel tr[data-filter-row='1']");
|
||||
|
||||
function applyFilter() {
|
||||
const query = filterInput.value.trim().toLowerCase();
|
||||
rows.forEach((row) => {
|
||||
const text = row.textContent.toLowerCase();
|
||||
row.style.display = text.includes(query) ? "" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
filterInput.addEventListener("input", applyFilter);
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -195,11 +195,14 @@
|
||||
hx-swap="outerHTML">
|
||||
<span class="text-muted small">Loading split controls…</span>
|
||||
</div>
|
||||
<div hx-get="{% url 'atlas:series_tag_consistency' pk=series.pk %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML">
|
||||
<span class="text-muted small">Loading tag analysis controls...</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-info btn-sm"
|
||||
hx-get="{% url 'atlas:series_tag_consistency' pk=series.pk %}?analyze=1"
|
||||
hx-target="#series-tag-consistency-modal .modal-content"
|
||||
hx-swap="innerHTML"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#series-tag-consistency-modal">
|
||||
Analyze tag consistency
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -244,6 +247,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="series-tag-consistency-modal" class="modal modal-blur fade" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" style="max-width: 1200px;">
|
||||
<div class="modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
@@ -3702,6 +3702,7 @@ def series_tag_consistency(request, pk):
|
||||
"""
|
||||
series = get_object_or_404(Series, pk=pk)
|
||||
analyze_requested = request.GET.get("analyze") == "1"
|
||||
can_split = series.check_user_can_edit(request.user)
|
||||
|
||||
same_tags = []
|
||||
different_tags = []
|
||||
@@ -3755,6 +3756,7 @@ def series_tag_consistency(request, pk):
|
||||
{
|
||||
"series": series,
|
||||
"analyze_requested": analyze_requested,
|
||||
"can_split": can_split,
|
||||
"image_count": image_count,
|
||||
"same_tags": same_tags,
|
||||
"different_tags": different_tags,
|
||||
|
||||
Reference in New Issue
Block a user