Implement streamlined UI for populations.

4 files changed, 194 insertions, 20 deletions

diff --git a/uploader/templates/populations/macro-display-population-card.html b/uploader/templates/populations/macro-display-population-card.html
index 16b477f..6b5f1e0 100644
--- a/uploader/templates/populations/macro-display-population-card.html
+++ b/uploader/templates/populations/macro-display-population-card.html
@@ -1,4 +1,4 @@
-{%from "species/macro-display-species-card.html" import display_species_card%}
+{%from "species/macro-display-species-card.html" import display_species_card,display_sui_species_card%}
 
 {%macro display_population_card(species, population)%}
 {{display_species_card(species)}}
@@ -39,3 +39,40 @@
   </div>
 </div>
 {%endmacro%}
+
+
+{%macro display_sui_population_card(species, population)%}
+{{display_sui_species_card(species)}}
+
+<div class="row">
+  <table class="table">
+    <caption>Current population</caption>
+    <tbody>
+      <tr>
+        <th>Name</th>
+        <td>{{population.Name}}</td>
+      </tr>
+
+      <tr>
+        <th>Full Name</th>
+        <td>{{population.FullName}}</td>
+      </tr>
+
+      <tr>
+        <th>Code</th>
+        <td>{{population.InbredSetCode}}</td>
+      </tr>
+
+      <tr>
+        <th>Genetic Type</th>
+        <td>{{population.GeneticType}}</td>
+      </tr>
+
+      <tr>
+        <th>Family</th>
+        <td>{{population.Family}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+{%endmacro%}
diff --git a/uploader/templates/populations/sui-base.html b/uploader/templates/populations/sui-base.html
new file mode 100644
index 0000000..88d3f54
--- /dev/null
+++ b/uploader/templates/populations/sui-base.html
@@ -0,0 +1,13 @@
+{%extends "species/sui-base.html"%}
+
+{%block breadcrumbs%}
+{{super()}}
+<li class="breadcrumb-item">
+  <a href="{{url_for('species.populations.view_population',
+           species_id=species['SpeciesId'],
+           population_id=population['Id'],
+           streamlined_ui=streamlined_ui)}}">
+    {{population["FullName"]}}
+  </a>
+</li>
+{%endblock%}
diff --git a/uploader/templates/populations/sui-view-population.html b/uploader/templates/populations/sui-view-population.html
new file mode 100644
index 0000000..a9f506a
--- /dev/null
+++ b/uploader/templates/populations/sui-view-population.html
@@ -0,0 +1,122 @@
+{%extends "populations/sui-base.html"%}
+{%from "macro-step-indicator.html" import step_indicator%}
+{%from "populations/macro-display-population-card.html" import display_sui_population_card%}
+
+{%block contents%}
+<div class="row">
+  <h2>{{step_indicator("3")}} Choose population action</h2>
+
+  <p>The tabs below present the actions/features available under a population.
+    Do have a look at each to decide your next option.</p>
+</div>
+
+<div class="row">
+  <ul class="nav nav-tabs" id="population-actions">
+    <li class="nav-item presentation">
+      <button class="nav-link"
+              id="samples-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#samples-content"
+              type="button"
+              role="tab"
+              aria-controls="samples-content"
+              aria-selected="true">Samples</button></li>
+    <li class="nav-item presentation">
+      <button class="nav-link active"
+              id="phenotypes-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#phenotypes-content"
+              type="button"
+              role="tab"
+              aria-controls="phenotypes-content"
+              aria-selected="false">Phenotypes</button></li>
+    {%if view_under_construction%}
+    <li class="nav-item presentation">
+        <button class="nav-link"
+                id="genotypes-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#genotypes-content"
+                type="button"
+                role="tab"
+                aria-controls="genotypes-content"
+                aria-selected="false">Genotypes</button></li>
+    <li class="nav-item presentation">
+        <button class="nav-link"
+                id="expression-data-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#expression-data-content"
+                type="button"
+                role="tab"
+                aria-controls="expression-data-content"
+                aria-selected="false">Expression-Data</button></li>
+    {%endif%}
+  </ul>
+</div>
+
+<div class="row">
+  <div class="tab-content" id="myTabContent">
+    <div class="tab-pane fade"
+         id="samples-content"
+         role="tabpanel"
+         aria-labelledby="samples-content-tab">
+      <p>Think of a <strong>"sample"</strong> as say a single case or individual
+        in the experiment. It could even be a single strain (where applicable)
+        under consideration.</p>
+      <p>This is a convenience feature for when you want to upload phenotypes to
+        the system, but do not have the genotypes data ready yet.</p>
+      <p>Please click the button below to provide the samples that will be used
+        in your data.</p>
+      <a href="{{url_for('species.populations.samples.list_samples',
+               species_id=species.SpeciesId,
+               population_id=population.Id,
+               streamlined_ui=streamlined_ui)}}"
+         title="Upload samples for population '{{population['Name']}}'"
+         class="btn btn-primary">Upload Samples</a>
+    </div>
+
+    <div class="tab-pane fade show active"
+         id="phenotypes-content"
+         role="tabpanel"
+         aria-labelledby="phenotypes-content-tab">
+      <p>This will allow you to upload new phenotypes intended for publication
+        (or already published) to the system.</p>
+      <p>The new phenotypes will be grouped under the
+        "<em>{{population.FullName}} ({{population.Name}})</em>" population of
+        the "<em>{{species.FullName}} ({{species.Name}})</em>" species, as
+        selected in previous steps.</p>
+      <p>Please click the button below to proceed.</p>
+      <a href="{{url_for('species.populations.phenotypes.view_dataset',
+           species_id=species.SpeciesId,
+           population_id=population.Id,
+           dataset_id=dataset.Id,
+           streamlined_ui=streamlined_ui)}}"
+         title="Upload phenotype data for population '{{population['Name']}}'"
+         class="btn btn-primary">Upload Phenotypes</a>
+    </div>
+    <div class="tab-pane fade"
+         id="genotypes-content"
+         role="tabpanel"
+         aria-labelledby="genotypes-content-tab">
+      <p>This allows you to upload the data that concerns your genotypes.</p>
+      <p>Any samples/individuals/cases/strains that do not already exist in the
+        system will be added. This does not delete any existing data.</p>
+      <a href="{{url_for('species.populations.genotypes.list_genotypes',
+               species_id=species.SpeciesId,
+               population_id=population.Id,
+               streamlined_ui=streamlined_ui)}}"
+         title="Upload genotype information for the '{{population.FullName}}' population of the '{{species.FullName}}' species."
+         class="btn btn-primary">upload genotypes</a>
+    </div>
+    <div class="tab-pane fade" id="expression-data-content" role="tabpanel" aria-labelledby="expression-data-content-tab">
+      <p>Upload expression data (mRNA data) for this population.</p>
+      <a href="#" title="" class="btn btn-primary">upload genotypes</a>
+    </div>
+  </div>
+</div>
+{%endblock%}
+
+{%block sidebarcontents%}
+{{display_sui_population_card(species, population)}}
+{%endblock%}
+
+
diff --git a/uploader/templates/species/macro-display-species-card.html b/uploader/templates/species/macro-display-species-card.html
index d7c4082..30c564f 100644
--- a/uploader/templates/species/macro-display-species-card.html
+++ b/uploader/templates/species/macro-display-species-card.html
@@ -24,25 +24,27 @@
 
 {%macro display_sui_species_card(species)%}
 <div class="row">
-  <table>
-    <caption>Selected Species</caption>
-    <tr>
-      <th>Name</th>
-      <td>{{species["Name"] | title}}</td>
-    </tr>
-    <tr>
-      <th>Scientific</th>
-      <td>{{species["FullName"]}}</td>
-    </tr>
-    {%if species["TaxonomyId"]%}
-    <tr>
-      <th>Taxonomy ID</th>
-      <td>
-        <a href="https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id={{species.TaxonomyId}}"
-           title="NCBI's Taxonomy Browser page for {{species.Name}}">
-          {{species.TaxonomyId}}</a>
-      </td>
-    </tr>
+  <table class="table">
+    <caption>Current Species</caption>
+    <tbody>
+      <tr>
+        <th>Name</th>
+        <td>{{species["Name"] | title}}</td>
+      </tr>
+      <tr>
+        <th>Scientific</th>
+        <td>{{species["FullName"]}}</td>
+      </tr>
+      {%if species["TaxonomyId"]%}
+      <tr>
+        <th>Taxonomy ID</th>
+        <td>
+          <a href="https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id={{species.TaxonomyId}}"
+             title="NCBI's Taxonomy Browser page for {{species.Name}}">
+            {{species.TaxonomyId}}</a>
+        </td>
+      </tr>
+    </tbody>
     {%endif%}
   </table>
 </div>