From cb8e883e46883c467cb9aed141c2d8849a32cb5c Mon Sep 17 00:00:00 2001
From: Tobias Block <tobias.block@nyumc.org>
Date: Tue, 8 Oct 2024 23:04:29 +0000
Subject: [PATCH] Added UI error message for query tool.

---
 webinterface/templates/dashboards/query.html | 25 ++++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/webinterface/templates/dashboards/query.html b/webinterface/templates/dashboards/query.html
index 7858fd1..531cb20 100644
--- a/webinterface/templates/dashboards/query.html
+++ b/webinterface/templates/dashboards/query.html
@@ -17,6 +17,10 @@ <h1 class="title is-4">DICOM Query</h1>
         Redis connection not available, so this dashboard will not function.
       </div>
       {% endif %}
+      <div id="backend-error" class="notification is-danger is-hidden">
+        A communication error with the backend has occurred. Check console logs.
+      </div>
+
         <form class="box" id="form">
             <div class="field is-horizontal">
               <div class="field-label is-normal">
@@ -144,13 +148,13 @@ <h1 class="title is-4">DICOM Query</h1>
                 <thead>
                     <tr>
                         <th></th>
-                        <th>id</th>
-                        <th>type</th>
-                        <th>status</th>
-                        <th>created_at</th>
-                        <th>accession</th>
-                        <th>result</th>
-                        <th>progress</th>
+                        <th>ID</th>
+                        <th>Type</th>
+                        <th>Status</th>
+                        <th>Created at</th>
+                        <th>Accession</th>
+                        <th>Result</th>
+                        <th>Progress</th>
                     </tr>
                 </thead>
                 <tbody></tbody>
@@ -338,6 +342,13 @@ <h1 class="title is-4">DICOM Query</h1>
         order: [[4, 'desc']],
         initComplete: function() {}
     });
+
+    $.fn.dataTable.ext.errMode = 'throw';
+    $('#get-accessions-table').on('error.dt', function(e, settings, techNote, message) {
+      console.log( 'An error has been reported by DataTables: ', message);
+      $('#backend-error').removeClass("is-hidden");
+    })    
+
     var jobId;
     var errMessage;
     var accessionTableConfig = {