From 3fb8a4de897eabd3e85520358619af7abcbd7664 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Fri, 23 Dec 2022 08:47:44 +0300
Subject: Help: Provide some help content for end user

---
 qc_app/entry.py                   |  5 +++
 qc_app/static/css/styles.css      | 29 ++++++++++++++-
 qc_app/templates/data_review.html | 77 +++++++++++++++++++++++++++++++++++++++
 qc_app/templates/index.html       | 20 ++++++++++
 4 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 qc_app/templates/data_review.html

diff --git a/qc_app/entry.py b/qc_app/entry.py
index 2c4600d..abea5ed 100644
--- a/qc_app/entry.py
+++ b/qc_app/entry.py
@@ -101,3 +101,8 @@ def upload_file():
     return redirect(url_for(
         "parse.parse", filename=filename,
         filetype=request.form["filetype"]))
+
+@entrybp.route("/data-review", methods=["GET"])
+def data_review():
+    """Provide some help on data expectations to the user."""
+    return render_template("data_review.html")
diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index d2071e6..c9f6737 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -10,12 +10,20 @@ label, legend {
     text-transform: capitalize;
 }
 
+#explainer {
+    font-family: Georgia, Garamond, serif;
+    font-style: normal;
+    font-size: 1.275em;
+}
+
 .heading {
     color: #FEFEFE;
     background-color: #336699;
     text-transform: capitalize;
-    border-radius: 5px;
+    border-radius: 5px 5px 0 0;
     padding-left: 0.5em;
+    font-weight: bold;
+    line-height: 1.5em;
 }
 
 fieldset {
@@ -108,6 +116,23 @@ table th,td {
     border-radius: 1em;
 }
 
+form {
+    border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #336699;
+}
+
+@media(min-width: 1250px) {
+    form {
+	width: 40%;
+    }
+
+    #explainer {
+	width: 65ch;
+    }
+}
+
 fieldset {
     border-style: none;
     display: grid;
@@ -132,7 +157,7 @@ input[disabled="true"],input[disabled="disabled"] {
     background-color: #F8D7DA;
 }
 
-form legend {
+form fieldset legend {
     padding-left: 3em;
     text-transform: capitalize;
     font-weight: bolder;
diff --git a/qc_app/templates/data_review.html b/qc_app/templates/data_review.html
new file mode 100644
index 0000000..7ac01ba
--- /dev/null
+++ b/qc_app/templates/data_review.html
@@ -0,0 +1,77 @@
+{%extends "base.html"%}
+
+{%block title%}Data Review{%endblock%}
+
+{%block contents%}
+<h1 class="heading">data review</h1>
+
+<div id="explainer">
+  <h2 id="data-concerns">Data Concerns</h2>
+  <p>The following are some of the requirements that the data in your file
+    <strong>MUST</strong> fulfil before it is considered valid for this system:
+  </p>
+
+  <ol>
+    <li>File headings
+      <ul>
+	<li>The first row in the file should contains the headings. The number of
+	  headings in this first row determines the number of columns expected for
+	  all other lines in the file.</li>
+	<li>Each heading value in the first row MUST appear in the first row
+	  <strong>ONE AND ONLY ONE</strong> time</li>
+	<li>The strain headers in your first row will be against a source of truth
+	  (<a href="https://gitlab.com/fredmanglis/gnqc_py/-/blob/main/etc/strains.csv"
+	      title="list of expected strains">see strains.csv [1.7M]</a>).<br />
+	  Pick the strain names from the <strong>'Name'</strong> and
+	  <strong>'Name2'</strong> fields.</li>
+      </ul>
+    </li>
+
+    <li>Data
+      <ol>
+	<li><strong>NONE</strong> of the data cells/fields is allowed to be empty.
+	  All fields/cells <strong>MUST</strong> contain a value.</li>
+	<li>The first column of the data rows will be considered a textual field,
+	  holding the "identifier" for that row<li>
+	<li>Except for the first column/field for each data row,
+	  <strong>NONE</strong> of the data columns/cells/fields should contain
+	  spurious characters like `eeeee`, `5.555iloveguix`, etc...<br />
+	  All of them should be decimal values</li>
+	<li>decimal numbers must conform to the following criteria:
+	  <ul>
+	    <li>when checking an average file decimal numbers must have exactly three
+	      decimal places to the right of the decimal point.</li>
+	    <li>when checking a standard error file decimal numbers must have six or
+	      greater decimal places to the right of the decimal point.</li>
+	    <li>there must be a number to the left side of the decimal place
+	      (e.g. 0.55555 is allowed but .55555 is not).<li>
+	  </ul>
+	</li>
+      </ol>
+    </li>
+  </ol>
+
+  
+  <h2 id="file-types">Supported File Types</h2>
+  We support the following file types:
+
+  <ul>
+    <li>Tab-Separated value files (.tsv)
+      <ul>
+	<li>The <strong>TAB</strong> character is used to separate the fields of each
+	  column</li>
+	<li>The values of each field <strong>ARE NOT</strong> quoted.</li>
+	<li>Here is an
+	  <a href="https://gitlab.com/fredmanglis/gnqc_py/-/blob/main/tests/test_data/no_data_errors.tsv">
+	    example file</a> with a single data row.</li>
+      </ul>
+    </li>
+    <li>.txt files: Content has the same format as .tsv file above</li>
+    <li>.zip files: each zip file should contain
+      <strong>ONE AND ONLY ONE</strong> file of the .tsv or .txt type above.
+      <br />Any zip file with more than one file is invalid, and so is an empty
+      zip file.</li>
+  </ul>
+
+</div>
+{%endblock%}
diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index 9111af0..9ee3af6 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -5,8 +5,28 @@
 {%block contents%}
 <h1 class="heading">upload file</h1>
 
+<div id="explainer">
+  <p>This application assumes that you are familiar with the basics of data
+    verification formats and uploading procedures. If you haven't done so please
+    go to this page to learn the requirements for file formats and helpful
+    suggestions to enter your data in a fast and easy way.</p>
+
+  <ol>
+    <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
+      with our system requirements. (
+      <a href="{{url_for('entry.data_review')}}#data-concerns"
+	 title="Details for the data expectations.">Help</a>
+      )</li>
+    <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
+      <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
+      files (<a href="{{url_for('entry.data_review')}}#file-types"
+	 title="Details for the data expectations.">Help</a>)</li>
+  </ol>
+</div>
+
 <form action="{{url_for('entry.upload_file')}}"
       method="POST" enctype="multipart/form-data">
+  <legend class="heading">upload file</legend>
   {%with messages = get_flashed_messages(with_categories=True) %}
   {%if messages %}
   <div class="alerts">
-- 
cgit v1.2.3