Improve error display for generic errors

2 files changed, 51 insertions, 10 deletions

diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index 79dab0e..67e8cb3 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -134,9 +134,13 @@ form fieldset:nth-child(odd) {
 }
 
 @media(min-width: 1250px) {
-    form, .explainer, .error-table {
+    form, .explainer {
 	width: 65ch;
     }
+
+    .error-table {
+	width: 85ch;
+    }
 }
 
 fieldset {
@@ -202,3 +206,15 @@ form fieldset legend {
     max-height: 250px;
     overflow: scroll;
 }
+
+.error-table {
+    display: block;
+    overflow: scroll;
+    max-height: 250px;
+    margin: 1em 0;
+}
+
+.error-table thead {
+    position: sticky;
+    top: 0;
+}
diff --git a/qc_app/templates/rqtl2/rqtl2-qc-job-error.html b/qc_app/templates/rqtl2/rqtl2-qc-job-error.html
index 49df061..e809e7c 100644
--- a/qc_app/templates/rqtl2/rqtl2-qc-job-error.html
+++ b/qc_app/templates/rqtl2/rqtl2-qc-job-error.html
@@ -4,10 +4,9 @@
 {%block title%}R/qtl2 bundle: QC Job Error{%endblock%}
 
 {%macro errors_table(tableid, errors)%}
-<table id="{{tableid}}"
-       class="error-table"
-       style="display: block; overflow: scroll; max-height: 250px;">
-  <thead style="position: sticky; top: 0;">
+<table id="{{tableid}}" class="error-table">
+  <caption>{{caption}}</caption>
+  <thead>
     <tr>
       <th>Line</th>
       <th>Column</th>
@@ -23,6 +22,10 @@
       <td>{{error.value}}</td>
       <td>{{error.message}}</td>
     </tr>
+    {%else%}
+    <tr>
+      <td colspan="4">No errors to display here.</td>
+    </tr>
     {%endfor%}
   </tbody>
 </table>
@@ -42,11 +45,33 @@
 <div class="explainer">
   We found the following generic errors in your R/qtl2 bundle:
 </div>
-<ul class="alert-error qc-error-display">
-  {%for msg in errorsgeneric%}
-  <li>{{msg}}</li>
-  {%endfor%}
-</ul>
+
+<h3>Missing Files</h3>
+<div class="explainer">
+  <p>These files are listed in the bundle's control file, but do not actually
+    exist in the bundle</p>
+</div>
+<table id="tbl-errors-missing-files" class="error-table">
+  <thead>
+    <tr>
+      <th>Control File Key</th>
+      <th>Bundle File Name</th>
+      <th>Message</th>
+    </tr>
+  </thead>
+  <tbody>
+    {%for error in (errorsgeneric | selectattr("type", "equalto", "MissingFile"))%}
+    <tr>
+      <td>{{error.controlfilekey}}</td>
+      <td>{{error.filename}}</td>
+      <td>{{error.message}}</td>
+    </tr>
+    {%endfor%}
+  </tbody>
+</table>
+
+<h3>Other Generic Errors</h3>
+{{errors_table("tbl-errors-generic", errorsgeneric| selectattr("type", "ne", "MissingFile"))}}
 {%endif%}
 
 {%if errorsgeno | length > 0%}