Use htmx triggered modals for help dialogs

openradx · Dec 6, 2023 · e166337 · e166337
1 parent b4a749e
commit e166337
Show file tree

Hide file tree

Showing 24 changed files with 348 additions and 227 deletions.
diff --git a/TODO.md b/TODO.md
@@ -2,6 +2,8 @@
 
 ## Top
 
+- Allow to trigger toasts from HTMX responses using HX-Trigger # see core.js of RADIS
+
 - Before new release
   -- test job_utils
   -- Test canceled task/job in test_workers.py
@@ -194,4 +196,8 @@
 
 ## RADIS
 
-- Move over to SVG sprites
+- In core_layout rename #dialog to #htmx-dialog and #modal to #htmx-modal, also in the core.js and also in all the htmx rendered templates (hx-target="#dialog" to hx-target="#htmx-dialog")
+- htmx.on("#htmx-modal", "hidden.bs.modal", () => {
+- delete unneeded \_message_modal.html and \_confirm_modal.html
+- use HtmxDetails in types.py
+- HtmxTemplateView also for RADIS (if needed)
diff --git a/adit/batch_query/templates/batch_query/_batch_query_help.html b/adit/batch_query/templates/batch_query/_batch_query_help.html
@@ -0,0 +1,97 @@
+{% load static from static %}
+{% load bootstrap_icon from core_extras %}
+<div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title">Batch Query Help</h5>
+        <button type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close" />
+    </div>
+    <div class="modal-body">
+        <p>
+            With a Batch Query you can create a job to find data of multiple studies in a source DICOM / PACS server. Batch
+            query jobs are put into a queue and will be processed by a worker when the time is right. You will get an Email when
+            the job is finished (or failed for some reason).
+        </p>
+        <p>
+            Each batch query job contains several query tasks that define what studies to search for. The search terms must be
+            specified in an Excel file (.xlsx). The first row of the Excel file must contain the header with the column titles (see below).
+            Each of the following rows represent a query task.
+        </p>
+        <p>
+            <strong class="text-danger">Cave!</strong>
+            <br />
+            If PatientID or AccessionNumber contains leading zeros those are relevant as it is not a number but a text
+            identifier. So make sure that your Excel file does not remove those leading zeros by setting the column type to text or
+            add a single quote ' as prefix to the text cell itself.
+        </p>
+        <p>
+            These are the columns in the batch file to execute your queries:
+            <dl>
+                <dt>PatientID</dt>
+                <dd>
+                    The unique ID of the patient in the PACS.
+                </dd>
+                <dt>PatientName</dt>
+                <dd>
+                    The name of the patient.
+                </dd>
+                <dt>PatientBirthDate</dt>
+                <dd>
+                    The birth date of the patient.
+                </dd>
+                <dt>AccessionNumber</dt>
+                <dd>
+                    The Accession Number (a unique ID) of the study.
+                </dd>
+                <dt>From</dt>
+                <dd>
+                    Only include studies newer than or equal to this date.
+                </dd>
+                <dt>Until</dt>
+                <dd>
+                    Only include studies older than or equal to this date.
+                </dd>
+                <dt>Modality</dt>
+                <dd>
+                    The modality of the study. Multiple modalities to query can be provided as a comma
+                    separated list.
+                </dd>
+                <dt>SeriesDescription</dt>
+                <dd>
+                    Only include series of the study, whose series description match a certain case insensitive regular
+                    expression pattern (see <a href="https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285/">
+                    introduction into using a regular expression</a> and <a href="https://regex101.com/"> testing your
+                    regular expression</a>).
+                </dd>
+                <dt>SeriesNumber</dt>
+                <dd>
+                    Only include series of the study with the specified series number. Multiple series
+                    numbers can be provided as a comma separated list.
+                </dd>
+                <dt>Pseudonym</dt>
+                <dd>
+                    A pseudonym to pseudonymize the images during a subsequent transfer with Batch Transfer.
+                </dd>
+            </dl>
+        </p>
+        <p>
+            The patient must be identifiable by either "PatientID" or "PatientName" together with "PatientBirthDate".
+            The remaining fields are optional and may limit the results for what you really need.
+        </p>
+        <p>
+            The result of the batch query can be viewed and downloaded from ADIT. The downloaded Excel file contains more data
+            then what can be viewed on the website. Each result contains the "PatientID" and "StudyInstanceUID", which is
+            necessary for a batch transfer job. If a "SeriesDescription" or a "SeriesNumber" was provided, the result will also
+            contain the "SeriesInstanceUID". This downloaded file can be used for a batch transfer. So a batch query job is in
+            a preparation step for a batch transfer.
+        </p>
+        <div class="mb-1">
+            <a href="{% static 'samples/batch_query_sample.xlsx' %}">
+                {% bootstrap_icon "download" %}
+                Download a sample batch query file (Excel format).
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/adit/batch_query/templates/batch_query/_batch_query_help_modal.html b/adit/batch_query/templates/batch_query/_batch_query_help_modal.html
diff --git a/adit/batch_query/templates/batch_query/batch_query_job_form.html b/adit/batch_query/templates/batch_query/batch_query_job_form.html
@@ -5,7 +5,13 @@
     <div class="d-flex justify-content-between align-items-start">
         <h4 class="mb-3">
             New Batch Query Job
-            {% include "core/_help_button.html" with target="#batch_query_help_modal" only %}
+            <button type="button"
+                    class="btn btn-sm btn-info align-baseline"
+                    hx-get="{% url 'batch_query_help' %}"
+                    hx-target="#htmx-dialog">
+                {% bootstrap_icon "question-circle" %}
+                Help
+            </button>
         </h4>
         <a href="{% url 'batch_query_job_list' %}">
             {% bootstrap_icon "list" %}
@@ -17,6 +23,5 @@ <h4 class="mb-3">
     {% crispy form %}
 {% endblock content %}
 {% block bottom %}
-    {% include "batch_query/_batch_query_help_modal.html" with modal_id="batch_query_help_modal" %}
     {% include "batch_query/_batch_file_errors_modal.html" with modal_id="batch_file_errors_modal" %}
 {% endblock bottom %}
diff --git a/adit/batch_query/urls.py b/adit/batch_query/urls.py
@@ -1,5 +1,7 @@
 from django.urls import path
 
+from adit.core.views import HtmxTemplateView
+
 from .views import (
     BatchQueryJobCancelView,
     BatchQueryJobCreateView,
@@ -21,6 +23,11 @@
         "update-preferences/",
         BatchQueryUpdatePreferencesView.as_view(),
     ),
+    path(
+        "help/",
+        HtmxTemplateView.as_view(template_name="batch_query/_batch_query_help.html"),
+        name="batch_query_help",
+    ),
     path(
         "jobs/",
         BatchQueryJobListView.as_view(),

diff --git a/adit/batch_transfer/templates/batch_transfer/_batch_transfer_help.html b/adit/batch_transfer/templates/batch_transfer/_batch_transfer_help.html
@@ -0,0 +1,68 @@
+{% load static from static %}
+{% load bootstrap_icon from core_extras %}
+<div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title">Batch Transfer Help</h5>
+        <button type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close" />
+    </div>
+    <div class="modal-body">
+        <p>
+            With this form you can create a new batch transfer job to transfer studies from a source server to a destination.
+            Batch transfer jobs are put into a queue and will be processed by a worker when the time is right. You will get an
+            Email when the job is finished (or failed for some reason).
+        </p>
+        <p>
+            Each batch transfer job contains several transfer tasks that define what studies to transfer. This data must be
+            specified in an Excel file (.xlsx). The first row of the Excel file must contain the header with the
+            column titles. The following rows contain the data that identifies the studies to transfer.
+        </p>
+        <p>
+            The required PatientID and StudyInstanceUID can be fetched by doing a "Batch Query". The resulting file of a
+            batch query can be used for the batch transfer. So a batch query is usually a preparation step for a batch transfer.
+        </p>
+        <p>
+            <strong class="text-danger">Cave!</strong>
+            <br />
+            If PatientID or AccessionNumber contains leading zeros those are relevant as it is not a number but a text
+            identifier. So make sure that your Excel file does not remove those leading zeros by setting the column type to text or
+            add a single quote ' as prefix to the text cell itself.
+        </p>
+        <p>
+            The following columns must be defined in the batch file:
+            <dl>
+                <dt>PatientID</dt>
+                <dd>
+                    The unique ID of the patient in the PACS. This column is required.
+                </dd>
+                <dt>StudyInstanceUID</dt>
+                <dd>
+                    A unique ID that identifies the study. This column is required.
+                </dd>
+                <dt>SeriesInstanceUID</dt>
+                <dd>
+                    An unique ID that identifies the series. This column is optional to only transfer
+                    specific series of a study.
+                </dd>
+                <dt>Pseudonym</dt>
+                <dd>
+                    A pseudonym to pseudonymize the images during transfer. This field is required
+                    if you don't have the permission to transfer unpseudonymized (the default).
+                </dd>
+            </dl>
+        </p>
+        <p>
+            The "SeriesInstanceUID" is optional. If provided, only the specified series of the study will be transferred. The
+            provided pseudonym is optional if you have the permissions to transfer unpseudonymized. It will be set as PatientID
+            and PatientName. So it is recommended to use cryptic identifier strings (e.g. "XFE3TEW2N").
+        </p>
+        <div class="mb-1">
+            <a href="{% static 'samples/batch_transfer_sample.xlsx' %}">
+                {% bootstrap_icon "download" %}
+                Download a sample batch transfer file (Excel format).
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/adit/batch_transfer/templates/batch_transfer/_batch_transfer_help_modal.html b/adit/batch_transfer/templates/batch_transfer/_batch_transfer_help_modal.html