From bcbb3a4d33782028727476b31909fa42399f5e03 Mon Sep 17 00:00:00 2001
From: Chris van Run <chris.vanrun@radboudumc.nl>
Date: Tue, 24 Dec 2024 15:51:25 +0100
Subject: [PATCH 1/6] Wrap results in a modal

---
 .../templates/algorithms/job_list_row.html    | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html b/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html
index 349c7d9e14..bbf87fa78c 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html
@@ -46,11 +46,50 @@
 <split></split>
 
 {{ object.comment }}
+
 <split></split>
+{% if object.rendered_result_text %}
+  <div  class="modal"
+        id="renderedResultModal-{{ object.pk }}"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="statusfoModalTitle"
+        aria-hidden="true"
+    >
+        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        Result
+                    </h5>
+                    <button type="button" class="close" data-dismiss="modal"
+                            aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="text-left modal-body">
+                    {{ object.rendered_result_text }}
+                </div>
+                <div class="modal-footer">
+                    <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
+                        <i class="fa fa-info-circle mr-1"></i>View Result Details
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<div class="child-p-mb-0 text-left">
-    {{ object.rendered_result_text }}
-</div>
+
+    <a class="badge badge-primary"
+        href="#renderedResultModal-{{ object.pk }}"
+        data-toggle="modal"
+        data-target="#renderedResultModal-{{ object.pk }}"
+        class="text-decoration-none"
+    >
+        <i class="fa fa-fw fa-eye"></i>
+        Result
+    </a>
+{% endif %}
 
 <split></split>
 <ul class="list-unstyled mb-0 text-left">

From 4722b78810539ac8ed5fe3828b6be9434f7aa714 Mon Sep 17 00:00:00 2001
From: Chris van Run <chris.vanrun@radboudumc.nl>
Date: Fri, 27 Dec 2024 11:05:53 +0100
Subject: [PATCH 2/6] Move error to modal in status column

---
 .../templates/algorithms/job_list_row.html    | 54 +------------------
 .../algorithms/job_status_detail.html         |  7 ---
 2 files changed, 2 insertions(+), 59 deletions(-)

diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html b/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html
index bbf87fa78c..e00bc93300 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_list_row.html
@@ -92,64 +92,14 @@ <h5 class="modal-title">
 {% endif %}
 
 <split></split>
-<ul class="list-unstyled mb-0 text-left">
-    {% if object.error_message %}
-
-        <div class="modal"
-             id="errorInfoModal-{{ object.pk }}"
-             tabindex="-1"
-             role="dialog"
-             aria-labelledby="statusfoModalTitle"
-             aria-hidden="true"
-        >
-            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">
-                            Error Message
-                        </h5>
-                        <button type="button" class="close" data-dismiss="modal"
-                                aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="text-left modal-body">
-                        {{ object.error_message }}
-                    </div>
-                    <div class="modal-footer">
-                        <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
-                            <i class="fa fa-info-circle mr-1"></i>View Result Details
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <li>
-            <a href="#errorInfoModal-{{ object.pk }}"
-               data-toggle="modal"
-               data-target="#errorInfoModal-{{ object.pk }}"
-               class="text-decoration-none"
-            >
-                <div class="badge badge-danger">
-                    <i class="fa fa-fw fa-eye"></i>
-                    Error
-                </div>
-                <div class="badge badge-light">
-                    {{ object.error_message | truncatechars:16 }}
-                </div>
-            </a>
-        </li>
-    {% endif %}
 
+<ul class="list-unstyled mb-0 text-left">
     {% for civ in object.outputs.all|sort_civs %}
         <li>
             {% include "components/partials/civ.html" with object=civ display_inline=True only %}
         </li>
     {% empty %}
-        {% if not object.error_message %}
-            <span class="text-muted">Empty</span>
-        {% endif %}
+        <span class="text-muted">Empty</span>
     {% endfor %}
 </ul>
 <split></split>
diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
index 4bdcd70cb9..e69de29bb2 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
@@ -1,7 +0,0 @@
-<span class="badge badge-{{ object.status_context }}" {% if not object.finished %}hx-get="{{ object.status_url }}" hx-trigger="load delay:30s" hx-swap="outerHTML"{% endif %}>
-    {% if object.animate %}
-        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-    {% endif %}
-    {{ object.get_status_display }}{% if object.status == object.SUCCESS and object.stderr %},
-        with warnings{% endif %}
-</span>

From bcbb087413696eb13279ea5ab1eb49882a7aea7a Mon Sep 17 00:00:00 2001
From: Chris van Run <chris.vanrun@radboudumc.nl>
Date: Fri, 27 Dec 2024 11:07:38 +0100
Subject: [PATCH 3/6] Fix curly linter errors

---
 .../algorithms/job_status_detail.html         | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
index e69de29bb2..c4fc435f95 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
@@ -0,0 +1,52 @@
+<span class="badge badge-{{ object.status_context }}">
+    {% if object.animate %}
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+    {% endif %}
+    {{ object.get_status_display }}{% if object.status == object.SUCCESS and object.stderr %},
+        with warnings{% endif %}
+</span>
+
+{% if object.error_message %}
+
+        <div class="modal"
+             id="errorInfoModal-{{ object.pk }}"
+             tabindex="-1"
+             role="dialog"
+             aria-labelledby="statusfoModalTitle"
+             aria-hidden="true"
+        >
+            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            Error Message
+                        </h5>
+                        <button type="button" class="close" data-dismiss="modal"
+                                aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="text-left modal-body">
+                        {{ object.error_message }}
+                    </div>
+                    <div class="modal-footer">
+                        <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
+                            <i class="fa fa-info-circle mr-1"></i>View Result Details
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div>
+            <a href="#errorInfoModal-{{ object.pk }}"
+                data-toggle="modal"
+                data-target="#errorInfoModal-{{ object.pk }}"
+                class="badge badge-light text-decoration-none"
+            >
+                <i class="fa fa-fw fa-eye"></i>
+                {{ object.error_message | truncatechars:16 }}
+            </a>
+        </div>
+
+{% endif %}

From c8dea636183133bb68d11441f472aebc0880677c Mon Sep 17 00:00:00 2001
From: Chris van Run <chris.vanrun@radboudumc.nl>
Date: Fri, 27 Dec 2024 11:17:14 +0100
Subject: [PATCH 4/6] Isolate curly linter error

---
 .../algorithms/job_status_detail.html         | 93 ++++++++++---------
 1 file changed, 48 insertions(+), 45 deletions(-)

diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
index c4fc435f95..07d9b0d33c 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
@@ -1,52 +1,55 @@
-<span class="badge badge-{{ object.status_context }}">
-    {% if object.animate %}
-        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-    {% endif %}
-    {{ object.get_status_display }}{% if object.status == object.SUCCESS and object.stderr %},
-        with warnings{% endif %}
-</span>
 
-{% if object.error_message %}
+<div>
+    <span class="badge badge-{{ object.status_context }}">
+        {% if object.animate %}
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+        {% endif %}
+        {{ object.get_status_display }}{% if object.status == object.SUCCESS and object.stderr %},
+            with warnings{% endif %}
+    </span>
 
-        <div class="modal"
-             id="errorInfoModal-{{ object.pk }}"
-             tabindex="-1"
-             role="dialog"
-             aria-labelledby="statusfoModalTitle"
-             aria-hidden="true"
-        >
-            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">
-                            Error Message
-                        </h5>
-                        <button type="button" class="close" data-dismiss="modal"
-                                aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="text-left modal-body">
-                        {{ object.error_message }}
-                    </div>
-                    <div class="modal-footer">
-                        <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
-                            <i class="fa fa-info-circle mr-1"></i>View Result Details
-                        </a>
+    {% if object.error_message %}
+
+            <div class="modal"
+                id="errorInfoModal-{{ object.pk }}"
+                tabindex="-1"
+                role="dialog"
+                aria-labelledby="statusfoModalTitle"
+                aria-hidden="true"
+            >
+                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">
+                                Error Message
+                            </h5>
+                            <button type="button" class="close" data-dismiss="modal"
+                                    aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="text-left modal-body">
+                            {{ object.error_message }}
+                        </div>
+                        <div class="modal-footer">
+                            <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
+                                <i class="fa fa-info-circle mr-1"></i>View Result Details
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div>
-            <a href="#errorInfoModal-{{ object.pk }}"
-                data-toggle="modal"
-                data-target="#errorInfoModal-{{ object.pk }}"
-                class="badge badge-light text-decoration-none"
-            >
-                <i class="fa fa-fw fa-eye"></i>
-                {{ object.error_message | truncatechars:16 }}
-            </a>
-        </div>
+            <div>
+                <a href="#errorInfoModal-{{ object.pk }}"
+                    data-toggle="modal"
+                    data-target="#errorInfoModal-{{ object.pk }}"
+                    class="badge badge-light text-decoration-none"
+                >
+                    <i class="fa fa-fw fa-eye"></i>
+                    {{ object.error_message | truncatechars:16 }}
+                </a>
+            </div>
 
-{% endif %}
+    {% endif %}
+</div>

From c1005b0a35a8a19d89f7814234fe493422f883ba Mon Sep 17 00:00:00 2001
From: Chris van Run <chris.vanrun@radboudumc.nl>
Date: Fri, 10 Jan 2025 13:34:39 +0100
Subject: [PATCH 5/6] Make warnings and errors more similar in visual
 appearance

---
 .../algorithms/job_status_detail.html         | 135 +++++++++++-------
 1 file changed, 86 insertions(+), 49 deletions(-)

diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
index 07d9b0d33c..10a1e699d3 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
@@ -1,55 +1,92 @@
-
-<div>
-    <span class="badge badge-{{ object.status_context }}">
-        {% if object.animate %}
-            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-        {% endif %}
-        {{ object.get_status_display }}{% if object.status == object.SUCCESS and object.stderr %},
-            with warnings{% endif %}
-    </span>
-
-    {% if object.error_message %}
-
-            <div class="modal"
-                id="errorInfoModal-{{ object.pk }}"
-                tabindex="-1"
-                role="dialog"
-                aria-labelledby="statusfoModalTitle"
-                aria-hidden="true"
-            >
-                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="modal-title">
-                                Error Message
-                            </h5>
-                            <button type="button" class="close" data-dismiss="modal"
-                                    aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                        </div>
-                        <div class="text-left modal-body">
-                            {{ object.error_message }}
-                        </div>
-                        <div class="modal-footer">
-                            <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
-                                <i class="fa fa-info-circle mr-1"></i>View Result Details
-                            </a>
-                        </div>
+{% if object.status == object.SUCCESS and object.stderr %}
+    <div>
+        <div class="modal"
+            id="warningInfoModal-{{ object.pk }}"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="statusModalTitle"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            Warnings on stderr
+                        </h5>
+                        <button type="button" class="close" data-dismiss="modal"
+                                aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="text-left modal-body">
+                        {{ object.stderr }}
+                    </div>
+                    <div class="modal-footer">
+                        <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
+                            <i class="fa fa-info-circle mr-1"></i>View Result Details
+                        </a>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div>
-                <a href="#errorInfoModal-{{ object.pk }}"
-                    data-toggle="modal"
-                    data-target="#errorInfoModal-{{ object.pk }}"
-                    class="badge badge-light text-decoration-none"
-                >
-                    <i class="fa fa-fw fa-eye"></i>
-                    {{ object.error_message | truncatechars:16 }}
-                </a>
+        <a href="#warningInfoModal-{{ object.pk }}"
+            data-toggle="modal"
+            data-target="#warningInfoModal-{{ object.pk }}"
+            class="badge badge-{{ object.status_context }}"
+            title="Click to see the warnings"
+        >
+            <i class="fa fa-fw fa-eye"></i>
+            {{ object.get_status_display }}, with warnings
+        </a>
+    </div>
+{% elif object.status == object.FAILURE and object.error_message %}
+    <div>
+        <div class="modal"
+            id="errorInfoModal-{{ object.pk }}"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="statusModalTitle"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            Error Message
+                        </h5>
+                        <button type="button" class="close" data-dismiss="modal"
+                                aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="text-left modal-body">
+                        {{ object.error_message }}
+                    </div>
+                    <div class="modal-footer">
+                        <a class="btn btn-primary" href="{{ object.get_absolute_url }}">
+                            <i class="fa fa-info-circle mr-1"></i>View Result Details
+                        </a>
+                    </div>
+                </div>
             </div>
+        </div>
 
-    {% endif %}
-</div>
+        <a href="#errorInfoModal-{{ object.pk }}"
+            data-toggle="modal"
+            data-target="#errorInfoModal-{{ object.pk }}"
+            class="badge badge-{{ object.status_context }}"
+            title="Click to see the error message"
+        >
+            <i class="fa fa-fw fa-eye"></i>
+            {{ object.get_status_display }}, with errors
+        </a>
+    </div>
+{% else %}
+    <span class="badge badge-{{ object.status_context }}">
+        {% if object.animate %}
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+        {% endif %}
+        {{ object.get_status_display }}
+    </span>
+{% endif %}

From bf8a281804769ffdda2f31e1a959821de078929a Mon Sep 17 00:00:00 2001
From: Chris van Run <chris.vanrun@radboudumc.nl>
Date: Fri, 10 Jan 2025 13:38:34 +0100
Subject: [PATCH 6/6] Minor aria fixes

---
 .../algorithms/templates/algorithms/job_status_detail.html  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
index 10a1e699d3..5bd96b5992 100644
--- a/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
+++ b/app/grandchallenge/algorithms/templates/algorithms/job_status_detail.html
@@ -4,7 +4,6 @@
             id="warningInfoModal-{{ object.pk }}"
             tabindex="-1"
             role="dialog"
-            aria-labelledby="statusModalTitle"
             aria-hidden="true"
         >
             <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
@@ -36,7 +35,7 @@ <h5 class="modal-title">
             class="badge badge-{{ object.status_context }}"
             title="Click to see the warnings"
         >
-            <i class="fa fa-fw fa-eye"></i>
+            <i class="fa fa-fw fa-eye" aria-hidden="true"></i>
             {{ object.get_status_display }}, with warnings
         </a>
     </div>
@@ -46,7 +45,6 @@ <h5 class="modal-title">
             id="errorInfoModal-{{ object.pk }}"
             tabindex="-1"
             role="dialog"
-            aria-labelledby="statusModalTitle"
             aria-hidden="true"
         >
             <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
@@ -78,7 +76,7 @@ <h5 class="modal-title">
             class="badge badge-{{ object.status_context }}"
             title="Click to see the error message"
         >
-            <i class="fa fa-fw fa-eye"></i>
+            <i class="fa fa-fw fa-eye" aria-hidden="true"></i>
             {{ object.get_status_display }}, with errors
         </a>
     </div>