Move index/home page to new UI templates.

7 files changed, 163 insertions, 446 deletions

diff --git a/uploader/base_routes.py b/uploader/base_routes.py
index e9f1165..72a8402 100644
--- a/uploader/base_routes.py
+++ b/uploader/base_routes.py
@@ -11,12 +11,8 @@ from flask import (flash,
                    current_app as app,
                    send_from_directory)
 
-
-from uploader.sui import sui_template
-
 from uploader.flask_extensions import url_for
 from uploader.ui import make_template_renderer
-from uploader.oauth2.client import user_logged_in
 from uploader.species.models import all_species, species_by_id
 
 base = Blueprint("base", __name__)
@@ -40,10 +36,11 @@ def index():
         print("We found a species ID. Processing...")
         if not bool(request.args.get("species_id")):
             return render_template(
-                sui_template("index.html" if user_logged_in() else "login.html"),
+                "index.html",
                 gn2server_intro=urljoin(app.config["GN2_SERVER_URL"], "/intro"),
                 species=all_species(conn),
-                streamlined_ui=streamlined_ui)
+                view_under_construction=request.args.get(
+                    "view_under_construction", False))
 
         species = species_by_id(conn, request.args.get("species_id"))
         if not bool(species):
diff --git a/uploader/templates/base.html b/uploader/templates/base.html
index d521ccb..719a646 100644
--- a/uploader/templates/base.html
+++ b/uploader/templates/base.html
@@ -16,7 +16,11 @@
     <link rel="stylesheet" type="text/css"
           href="{{url_for('base.datatables',
                 filename='css/dataTables.bootstrap5.min.css')}}" />
-    <link rel="stylesheet" type="text/css" href="/static/css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/layout-common.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/layout-large.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/layout-medium.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/layout-small.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/theme.css" />
 
     {%block css%}{%endblock%}
 
@@ -42,91 +46,29 @@
       </nav>
     </header>
 
-    <aside id="nav-sidebar">
-      <ul class="nav flex-column">
-        <li {%if activemenu=="home"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('base.index')}}" >Home</a></li>
-        <li {%if activemenu=="publications"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('publications.index')}}"
-             title="View and manage publications.">Publications</a></li>
-        <li {%if activemenu=="species"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.list_species')}}"
-             title="View and manage species information.">Species</a></li>
-        <li {%if activemenu=="platforms"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.platforms.index')}}"
-             title="View and manage species platforms.">Sequencing Platforms</a></li>
-        <li {%if activemenu=="populations"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.populations.index')}}"
-             title="View and manage species populations.">Populations</a></li>
-        <li {%if activemenu=="samples"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.populations.samples.index')}}"
-             title="Upload population samples.">Samples</a></li>
-        <li {%if activemenu=="genotypes"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.populations.genotypes.index')}}"
-             title="Upload Genotype data.">Genotype Data</a></li>
-        <!--
-            TODO: Maybe include menus here for managing studies and dataset or
-            maybe have the studies/datasets managed under their respective
-            sections, e.g. "Publish*" studies/datasets under the "Phenotypes"
-            section, "ProbeSet*" studies/datasets under the "Expression Data"
-            sections, etc.
-          -->
-        <li {%if activemenu=="phenotypes"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.populations.phenotypes.index')}}"
-             title="Upload phenotype data.">Phenotype Data</a></li>
-        <!--
-        <li {%if activemenu=="expression-data"%}class="activemenu"{%endif%}>
-          <a href="{{url_for('species.populations.expression-data.index')}}"
-             title="Upload expression data."
-             class="not-implemented">Expression Data</a></li>
-        <li {%if activemenu=="individuals"%}class="activemenu"{%endif%}>
-          <a href="#"
-             class="not-implemented"
-             title="Upload individual data.">Individual Data</a></li>
-        <li {%if activemenu=="rna-seq"%}class="activemenu"{%endif%}>
-          <a href="#"
-             class="not-implemented"
-             title="Upload RNA-Seq data.">RNA-Seq Data</a></li>
-        <li {%if activemenu=="async-jobs"%}class="activemenu"{%endif%}>
-          <a href="#"
-             class="not-implemented"
-             title="View and manage the backgroud jobs you have running">
-            Background Jobs</a></li>
-        -->
-      </ul>
-    </aside>
 
     <main id="main" class="main">
+      <nav id="breadcrumbs" aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          {%block breadcrumbs%}
+          <li class="breadcrumb-item">
+            <a href="{{url_for('base.index')}}">Home</a></li>
+          {%endblock%}
+        </ol>
+      </nav>
 
-      <div id="pagetitle" class="pagetitle">
-        <span class="title">Data Upload and Quality Control: {%block pagetitle%}{%endblock%}</span>
-        <!--
-            <nav>
-              <ol class="breadcrumb">
-                <li {%if activelink is not defined or activelink=="home"%}
-                    class="breadcrumb-item active"
-                    {%else%}
-                    class="breadcrumb-item"
-                    {%endif%}>
-                  <a href="{{url_for('base.index')}}">Home</a>
-                </li>
-                {%block lvl1_breadcrumbs%}{%endblock%}
-              </ol>
-            </nav>
-            -->
-      </div>
-
-      <div id="all-content">
-        <div id="main-content">
+      <div id="main-content">
           {%block contents%}{%endblock%}
         </div>
-        <div id="sidebar-content">
+
+      <div id="sidebar-content">
           {%block sidebarcontents%}{%endblock%}
         </div>
-      </div>
     </main>
 
 
+
+    <script type="text/javascript" src="/static/js/debug.js"></script>
     <!--
         Core dependencies
       -->
diff --git a/uploader/templates/index.html b/uploader/templates/index.html
index aa1414e..e426732 100644
--- a/uploader/templates/index.html
+++ b/uploader/templates/index.html
@@ -1,107 +1,162 @@
 {%extends "base.html"%}
 {%from "flash_messages.html" import flash_all_messages%}
+{%from "macro-forms.html" import add_http_feature_flags%}
 
 {%block title%}Home{%endblock%}
 
 {%block pagetitle%}Home{%endblock%}
 
-{%block contents%}
-
-<div class="row">
-  {{flash_all_messages()}}
-  <div class="explainer">
-    <p>Welcome to the <strong>GeneNetwork Data Upload and Quality Control
-        System</strong>.</p>
-    <p>This tool helps you prepare and upload research data to GeneNetwork for
-      analysis.</p>
-
-    <h2 class="heading">Getting Started</h2>
-    <p>The sections below explain the features of the system. Review this guide
-      to learn how to use the system.</p>
-
-    {%block extrapageinfo%}{%endblock%}
-
-    <h3 class="subheading">Species</h3>
-
-    <p>GeneNetwork supports genetic studies across multiple species (e.g. mice
-      [Mus musculus], human [homo sapiens], rats [Rattus norvegicus], etc.) .
-      Here you can:</p>
-    <ul>
-      <li>View all species that are currently supported</li>
-      <li>Add new species not yet in the system</li>
-    </ul>
-
-    <h3 class="subheading">Populations</h3>
-
-    <p>A "population" refers to a specific subgroup within a species that you’re
-      studying (e.g., BXD mice). Here you can:</p>
-    <ul>
-      <li>View the populations that exist for a selected species</li>
-      <li>Add new populations of study for a selected species</li>
-    </ul>
-
-    <h3 class="subheading">Samples</h3>
-
-    <p>Manage individual specimens or cases used in your experiments. These
-      include:</p>
-
-    <ul>
-      <li>Experimental subjects</li>
-      <li>Data sources (e.g., tissue samples, clinical cases)</li>
-      <li>Strain means (instead of entering multiple BXD1 individuals, for
-        example, the mean would be entered for a single BXD1 strain)</li>
-    </ul>
-
-
-    <h3 class="subheading">Genotype Data</h3>
-
-    <p>Upload and review genetic markers and allele encodings for your
-      population. Key details:</p>
+{%block extra_breadcrumbs%}{%endblock%}
 
-    <ul>
-      <li>Markers are species-level (e.g., mouse SNP databases).</li>
-      <li>Allele data is population-specific (tied to your experimental
-        samples).</li>
-    </ul>
-
-    <p><strong>Requirement</strong>: Samples must already have been registered
-      in the system before uploading genotype data.</p>
-
-    <h3 class="subheading">Phenotype Data</h3>
+{%block contents%}
 
-    <p>Phenotypes are the visible traits or features of a living thing. For
-      example, phenotypes include:</p>
+{%macro add_form_buttons()%}
+<div class="row form-buttons">
+  <div class="col">
+    <input type="submit"
+           class="btn btn-primary"
+           value="use selected species" />
+  </div>
+  <div class="col">
+    <a href="{{url_for('species.create_species', return_to='base.index')}}"
+       class="btn btn-outline-primary"
+       title="Create a new species.">Create a new Species</a>
+  </div>
+</div>
+{%endmacro%}
 
-    <ul>
-      <li>Weight</li>
-      <li>Height</li>
-      <li>Color (such as the color of fur or eyes)</li>
-    </ul>
+<div class="row">{{flash_all_messages()}}</div>
 
-    <p>This part of the system will allow you to upload and manage the values
-      for different phenotypes from various samples in your studies.</p>
+{%if user_logged_in()%}
 
-    <!--
+<div class="row">
+  <ul class="nav nav-tabs" id="index-actions">
+    <li class="nav-item presentation">
+      <button class="nav-link active"
+              id="upload-data-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#upload-data-content"
+              type="button"
+              role="tab"
+              aria-controls="upload-data-content"
+              aria-selected="false">Upload Data</button></li>
+    <li class="nav-item presentation">
+      <button class="nav-link"
+              id="publications-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#publications-content"
+              type="button"
+              role="tab"
+              aria-controls="publications-content"
+              aria-selected="true">Publications</button></li>
+  </ul>
+</div>
 
-        <h3 class="subheading">Expression Data</h3>
+<div class="row">
+  <div class="tab-content" id="upload-data-tabs-content">
+    <div class="tab-pane fade show active"
+         id="upload-data-content"
+         role="tabpanel"
+         aria-labelledby="upload-data-content-tab">
+      <h2 class="heading">Species</h2>
+
+      <p>Select the species you want to work with.</p>
+
+      <form method="GET" action="{{url_for('base.index')}}" class="form-horizontal">
+        {{add_http_feature_flags()}}
+
+        {{add_form_buttons()}}
+
+        {%if species | length != 0%}
+        <div style="margin-top:1em;">
+          <table id="tbl-select-species" class="table compact stripe"
+                 data-species-list='{{species | tojson}}'>
+            <thead>
+              <tr>
+                <th></th>
+                <th>Species Name</th>
+              </tr>
+            </thead>
+
+            <tbody></tbody>
+          </table>
+        </div>
+
+        {%else%}
+
+        <label class="control-label" for="rdo-cant-find-species">
+          <input id="rdo-cant-find-species" type="radio" name="species_id"
+                 value="CREATE-SPECIES" />
+          There are no species to select from. Create the first one.</label>
+
+        <div class="col-sm-offset-10 col-sm-2">
+          <input type="submit"
+                 class="btn btn-primary col-sm-offset-1"
+                 value="continue" />
+        </div>
+
+        {%endif%}
+
+        {{add_form_buttons()}}
+
+      </form>
+    </div>
+
+    <div class="tab-pane fade"
+         id="publications-content"
+         role="tabpanel"
+         aria-labelledby="publications-content-tab">
+      <p>View, edit and delete existing publications, and add new
+        publications by clicking on the button below.</p>
+
+      <a href="{{url_for('publications.index')}}"
+         title="Manage publications."
+         class="btn btn-primary">manage publications</a>
+    </div>
+  </div>
+</div>
 
-    <p class="text-danger">
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
-      <strong>TODO</strong>: Document this &hellip;</p>
+  {%else%}
+
+  <div class="row">
+    <p>The Genenetwork Uploader (<em>gn-uploader</em>) enables upload of new data
+      into the Genenetwork System. It provides Quality Control over data, and
+      guidance in case you data does not meet the standards for acceptance.</p>
+    <p>
+      <a href="{{authserver_authorise_uri()}}"
+         title="Sign in to the system"
+         class="btn btn-primary">Sign in</a>
+      to get started.</p>
+  </div>
+  {%endif%}
 
-    <h3 class="subheading">Individual Data</h3>
+  {%endblock%}
 
-    <p class="text-danger">
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
-      <strong>TODO</strong>: Document this &hellip;</p>
 
-    <h3 class="subheading">RNA-Seq Data</h3>
 
-    <p class="text-danger">
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
-      <strong>TODO</strong>: Document this &hellip;</p>
+  {%block sidebarcontents%}
+  {%if view_under_construction%}
+  <div class="row">
+    <p>The data in Genenetwork is related to one species or another. Use the form
+      provided to select from existing species, or click on the
+      "Create a New Species" button if you cannot find the species you want to
+      work with.</p>
   </div>
-  -->
-</div>
+  <div class="row">
+    <form id="frm-quick-navigation">
+      <legend>Quick Navigation</legend>
+      <div class="form-group">
+        <label for="fqn-species-id">Species</label>
+        <select name="species_id">
+          <option value="">Select species</option>
+        </select>
+      </div>
+    </form>
+  </div>
+  {%endif%}
+  {%endblock%}
+
 
-{%endblock%}
+  {%block javascript%}
+  <script type="text/javascript" src="/static/js/species.js"></script>
+  {%endblock%}
diff --git a/uploader/templates/login.html b/uploader/templates/login.html
deleted file mode 100644
index e76c644..0000000
--- a/uploader/templates/login.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{%extends "index.html"%}
-
-{%block title%}Data Upload{%endblock%}
-
-{%block pagetitle%}log in{%endblock%}
-
-{%block extrapageinfo%}
-<p class="text-dark">
-  You <strong>need to
-    <a href="{{authserver_authorise_uri()}}"
-       title="Sign in to the system">sign in</a></strong> to use this system.</p>
-{%endblock%}
diff --git a/uploader/templates/sui-base.html b/uploader/templates/sui-base.html
deleted file mode 100644
index 719a646..0000000
--- a/uploader/templates/sui-base.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-
-    <meta charset="UTF-8" />
-    <meta application-name="GeneNetwork Quality-Control Application" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    {%block extrameta%}{%endblock%}
-
-    <title>Data Upload and Quality Control: {%block title%}{%endblock%}</title>
-
-    <link rel="stylesheet" type="text/css"
-	  href="{{url_for('base.bootstrap',
-                filename='css/bootstrap.min.css')}}" />
-    <link rel="stylesheet" type="text/css"
-          href="{{url_for('base.datatables',
-                filename='css/dataTables.bootstrap5.min.css')}}" />
-    <link rel="stylesheet" type="text/css" href="/static/css/layout-common.css" />
-    <link rel="stylesheet" type="text/css" href="/static/css/layout-large.css" />
-    <link rel="stylesheet" type="text/css" href="/static/css/layout-medium.css" />
-    <link rel="stylesheet" type="text/css" href="/static/css/layout-small.css" />
-    <link rel="stylesheet" type="text/css" href="/static/css/theme.css" />
-
-    {%block css%}{%endblock%}
-
-  </head>
-
-  <body>
-    <header id="header">
-      <span id="header-text">GeneNetwork</span>
-      <nav id="header-nav">
-        <ul class="nav justify-content-end">
-          <li>
-            {%if user_logged_in()%}
-            <a href="{{url_for('oauth2.logout')}}"
-               title="Log out of the system">
-              <span class="glyphicon glyphicon-user"></span>
-              {{user_email()}} Sign Out</a>
-            {%else%}
-            <a href="{{authserver_authorise_uri()}}"
-               title="Log in to the system">Sign In</a>
-            {%endif%}
-          </li>
-        </ul>
-      </nav>
-    </header>
-
-
-    <main id="main" class="main">
-      <nav id="breadcrumbs" aria-label="breadcrumb">
-        <ol class="breadcrumb">
-          {%block breadcrumbs%}
-          <li class="breadcrumb-item">
-            <a href="{{url_for('base.index')}}">Home</a></li>
-          {%endblock%}
-        </ol>
-      </nav>
-
-      <div id="main-content">
-          {%block contents%}{%endblock%}
-        </div>
-
-      <div id="sidebar-content">
-          {%block sidebarcontents%}{%endblock%}
-        </div>
-    </main>
-
-
-
-    <script type="text/javascript" src="/static/js/debug.js"></script>
-    <!--
-        Core dependencies
-      -->
-    <script src="{{url_for('base.jquery',
-                 filename='jquery.min.js')}}"></script>
-    <script src="{{url_for('base.bootstrap',
-                 filename='js/bootstrap.min.js')}}"></script>
-
-    <!--
-        DataTables dependencies
-      -->
-    <script type="text/javascript"
-            src="{{url_for('base.datatables',
-                 filename='js/dataTables.min.js')}}"></script>
-    <script type="text/javascript"
-        src="{{url_for('base.datatables_extensions',
-             filename='scroller/js/dataTables.scroller.min.js')}}"></script>
-    <script type="text/javascript"
-            src="{{url_for('base.datatables_extensions',
-                 filename='buttons/js/dataTables.buttons.min.js')}}"></script>
-    <script type="text/javascript"
-            src="{{url_for('base.datatables_extensions',
-                 filename='select/js/dataTables.select.min.js')}}"></script>
-
-    <!--
-        local dependencies
-      -->
-    <script type="text/javascript" src="/static/js/utils.js"></script>
-    <script type="text/javascript" src="/static/js/datatables.js"></script>
-    {%block javascript%}{%endblock%}
-  </body>
-</html>
diff --git a/uploader/templates/sui-index.html b/uploader/templates/sui-index.html
deleted file mode 100644
index b93bf40..0000000
--- a/uploader/templates/sui-index.html
+++ /dev/null
@@ -1,161 +0,0 @@
-{%extends "sui-base.html"%}
-{%from "flash_messages.html" import flash_all_messages%}
-{%from "macro-forms.html" import add_http_feature_flags%}
-{%from "macro-step-indicator.html" import step_indicator%}
-
-{%block title%}Home{%endblock%}
-
-{%block pagetitle%}Home{%endblock%}
-
-{%block extra_breadcrumbs%}{%endblock%}
-
-{%block contents%}
-
-{%macro add_form_buttons()%}
-<div class="row form-buttons">
-  <div class="col">
-    <input type="submit"
-           class="btn btn-primary"
-           value="use selected species" />
-  </div>
-  <div class="col">
-    <a href="{{url_for('species.create_species', return_to='base.index')}}"
-       class="btn btn-outline-primary"
-       title="Create a new species.">Create a new Species</a>
-  </div>
-</div>
-{%endmacro%}
-
-<div class="row">{{flash_all_messages()}}</div>
-
-{%if user_logged_in()%}
-
-<div class="row">
-  <ul class="nav nav-tabs" id="index-actions">
-    <li class="nav-item presentation">
-      <button class="nav-link active"
-              id="upload-data-tab"
-              data-bs-toggle="tab"
-              data-bs-target="#upload-data-content"
-              type="button"
-              role="tab"
-              aria-controls="upload-data-content"
-              aria-selected="false">Upload Data</button></li>
-    <li class="nav-item presentation">
-      <button class="nav-link"
-              id="publications-tab"
-              data-bs-toggle="tab"
-              data-bs-target="#publications-content"
-              type="button"
-              role="tab"
-              aria-controls="publications-content"
-              aria-selected="true">Publications</button></li>
-  </ul>
-</div>
-
-<div class="row">
-  <div class="tab-content" id="upload-data-tabs-content">
-    <div class="tab-pane fade show active"
-         id="upload-data-content"
-         role="tabpanel"
-         aria-labelledby="upload-data-content-tab">
-      <h2 class="heading">Species</h2>
-
-      <p>Select the species you want to work with.</p>
-
-      <form method="GET" action="{{url_for('base.index')}}" class="form-horizontal">
-        {{add_http_feature_flags()}}
-
-        {{add_form_buttons()}}
-
-        {%if species | length != 0%}
-        <div style="margin-top:1em;">
-          <table id="tbl-select-species" class="table compact stripe"
-                 data-species-list='{{species | tojson}}'>
-            <thead>
-              <tr>
-                <th></th>
-                <th>Species Name</th>
-              </tr>
-            </thead>
-
-            <tbody></tbody>
-          </table>
-        </div>
-
-        {%else%}
-
-        <label class="control-label" for="rdo-cant-find-species">
-          <input id="rdo-cant-find-species" type="radio" name="species_id"
-                 value="CREATE-SPECIES" />
-          There are no species to select from. Create the first one.</label>
-
-        <div class="col-sm-offset-10 col-sm-2">
-          <input type="submit"
-                 class="btn btn-primary col-sm-offset-1"
-                 value="continue" />
-        </div>
-
-        {%endif%}
-
-        {{add_form_buttons()}}
-
-      </form>
-    </div>
-
-    <div class="tab-pane fade"
-         id="publications-content"
-         role="tabpanel"
-         aria-labelledby="publications-content-tab">
-      <p>View, edit and delete existing publications, and add new
-        publications by clicking on the button below.</p>
-
-      <a href="{{url_for('publications.index')}}"
-         title="Manage publications."
-         class="btn btn-primary">manage publications</a>
-    </div>
-  </div>
-</div>
-
-  {%else%}
-
-  <div class="row">
-    <p>The Genenetwork Uploader (<em>gn-uploader</em>) enables upload of new data
-      into the Genenetwork System. It provides Quality Control over data, and
-      guidance in case you data does not meet the standards for acceptance.</p>
-    <p>
-      <a href="{{authserver_authorise_uri()}}"
-         title="Sign in to the system"
-         class="btn btn-primary">Sign in</a>
-      to get started.</p>
-  </div>
-  {%endif%}
-
-  {%endblock%}
-
-
-
-  {%block sidebarcontents%}
-  <div class="row">
-    <p>The data in Genenetwork is related to one species or another. Use the form
-      provided to select from existing species, or click on the
-      "Create a New Species" button if you cannot find the species you want to
-      work with.</p>
-  </div>
-  <div class="row">
-    <form id="frm-quick-navigation">
-      <legend>Quick Navigation</legend>
-      <div class="form-group">
-        <label for="fqn-species-id">Species</label>
-        <select name="species_id">
-          <option value="">Select species</option>
-        </select>
-      </div>
-    </form>
-  </div>
-  {%endblock%}
-
-
-  {%block javascript%}
-  <script type="text/javascript" src="/static/js/species.js"></script>
-  {%endblock%}
diff --git a/uploader/templates/sui-login.html b/uploader/templates/sui-login.html
deleted file mode 120000
index 733bbd3..0000000
--- a/uploader/templates/sui-login.html
+++ /dev/null
@@ -1 +0,0 @@
-sui-index.html
\ No newline at end of file