From 01ffc39815b2f15c8e3a6523799764372b12122a Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Wed, 17 Dec 2025 14:05:34 -0600
Subject: Move phenotypes dataset UI to its own template.

---
 uploader/phenotypes/views.py                       |   8 +-
 .../templates/phenotypes/sui-view-dataset.html     | 215 +++++++++++++++++++++
 .../templates/populations/sui-view-population.html | 156 +--------------
 3 files changed, 224 insertions(+), 155 deletions(-)
 create mode 100644 uploader/templates/phenotypes/sui-view-dataset.html

(limited to 'uploader')

diff --git a/uploader/phenotypes/views.py b/uploader/phenotypes/views.py
index ead43ab..9df7d81 100644
--- a/uploader/phenotypes/views.py
+++ b/uploader/phenotypes/views.py
@@ -185,12 +185,6 @@ def with_dataset(
 def view_dataset(# pylint: disable=[unused-argument]
         species: dict, population: dict, dataset: dict, **kwargs):
     """View a specific dataset"""
-    if bool(request.args.get("streamlined_ui")):
-        # Redirect back to the "View Population" page for the time being.
-        return redirect(url_for("species.populations.view_population",
-                                species_id=species["SpeciesId"],
-                                population_id=population["Id"]))
-
     with database_connection(app.config["SQL_URI"]) as conn:
         dataset = dataset_by_id(
             conn, species["SpeciesId"], population["Id"], dataset["Id"])
@@ -203,7 +197,7 @@ def view_dataset(# pylint: disable=[unused-argument]
 
         start_at = max(safe_int(request.args.get("start_at") or 0), 0)
         count = int(request.args.get("count") or 20)
-        return render_template("phenotypes/view-dataset.html",
+        return render_template(sui_template("phenotypes/view-dataset.html"),
                                species=species,
                                population=population,
                                dataset=dataset,
diff --git a/uploader/templates/phenotypes/sui-view-dataset.html b/uploader/templates/phenotypes/sui-view-dataset.html
new file mode 100644
index 0000000..6a26004
--- /dev/null
+++ b/uploader/templates/phenotypes/sui-view-dataset.html
@@ -0,0 +1,215 @@
+{%extends "phenotypes/sui-base.html"%}
+{%from "flash_messages.html" import flash_all_messages%}
+{%from "macro-table-pagination.html" import table_pagination%}
+
+{%block title%}Phenotypes{%endblock%}
+
+{%block pagetitle%}Phenotypes{%endblock%}
+
+{%block lvl4_breadcrumbs%}
+<li {%if activelink=="view-dataset"%}
+    class="breadcrumb-item active"
+    {%else%}
+    class="breadcrumb-item"
+    {%endif%}>
+  <a href="{{url_for('species.populations.phenotypes.view_dataset',
+           species_id=species.SpeciesId,
+           population_id=population.Id,
+           dataset_id=dataset.Id)}}">View</a>
+</li>
+{%endblock%}
+
+{%block contents%}
+{{flash_all_messages()}}
+
+<div class="row">
+  <p>The basic dataset details are:</p>
+
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Full Name</th>
+        <th>Short Name</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td>{{dataset.Name}}</td>
+        <td>{{dataset.FullName}}</td>
+        <td>{{dataset.ShortName}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="row">
+  <div class="col">
+    <a href="{{url_for('species.populations.phenotypes.add_phenotypes',
+             species_id=species.SpeciesId,
+             population_id=population.Id,
+             dataset_id=dataset.Id)}}"
+       title="Add a bunch of phenotypes"
+       class="btn btn-primary">Add phenotypes</a>
+  </div>
+  
+  <div class="col">
+    <a href="#"
+       title="List all existing publications for this population."
+       class="btn btn-primary not-implemented">view publications</a>
+    <!-- Maybe, actually filter publications by population? -->
+    <!-- Provide other features for publications on loaded page. -->
+  </div>
+
+  <div class="col">
+    <form id="frm-recompute-phenotype-means"
+          method="POST"
+          action="{{url_for(
+                  'species.populations.phenotypes.recompute_means',
+                  species_id=species['SpeciesId'],
+                  population_id=population['Id'],
+                  dataset_id=dataset['Id'])}}"
+          class="d-flex flex-row align-items-center flex-wrap"
+          style="display: inline;">
+      <input type="submit"
+             title="Compute/Recompute the means for all phenotypes."
+             class="btn btn-info"
+             value="(rec/c)ompute means"
+             id="submit-frm-recompute-phenotype-means" />
+    </form>
+  </div>
+
+  <div class="col">
+    <form id="frm-run-qtlreaper"
+          method="POST"
+          action="{{url_for(
+                  'species.populations.phenotypes.rerun_qtlreaper',
+                  species_id=species['SpeciesId'],
+                  population_id=population['Id'],
+                  dataset_id=dataset['Id'])}}"
+          class="d-flex flex-row align-items-center flex-wrap"
+          style="display: inline;">
+      <input type="submit"
+             title="Run/Rerun QTLReaper."
+             class="btn btn-info"
+             value="(re)run QTLReaper"
+             id="submit-frm-rerun-qtlreaper" />
+    </form>
+  </div>
+</div>
+
+<div class="row">
+  <h2>Phenotype Data</h2>
+
+  <p>Click on any of the phenotypes in the table below to view and edit that
+    phenotype's data.</p>
+  <p>Use the search to filter through all the phenotypes and find specific
+    phenotypes of interest.</p>
+</div>
+
+
+<div class="row">
+
+  <table id="tbl-phenotypes-list" class="table compact stripe cell-border">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Index</th>
+        <th>Record</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+
+    <tbody></tbody>
+  </table>
+</div>
+{%endblock%}
+
+
+{%block javascript%}
+<script type="text/javascript" src="/static/js/urls.js"></script>
+
+<script type="text/javascript">
+  $(function() {
+      var species_id = {{species.SpeciesId}};
+      var population_id = {{population.Id}};
+      var dataset_id = {{dataset.Id}};
+      var dataset_name = "{{dataset.Name}}";
+      var data = {{phenotypes | tojson}};
+
+      var dtPhenotypesList = buildDataTable(
+          "#tbl-phenotypes-list",
+          data,
+          [
+              {
+                  data: function(pheno) {
+                      return `<input type="checkbox" name="selected-phenotypes" `
+                          + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" `
+                          + `value="${pheno.InbredSetCode}_${pheno.xref_id}" `
+                          + `class="chk-row-select" />`
+                  }
+              },
+              {data: "sequence_number"},
+              {
+                  data: function(pheno, type, set, meta) {
+                      var spcs_id = {{species.SpeciesId}};
+                      var pop_id = {{population.Id}};
+                      var dtst_id = {{dataset.Id}};
+                      var url = buildURLFromCurrentURL(
+                          (`/species/${spcs_id}` +
+                          `/populations/${pop_id}` +
+                          `/phenotypes/datasets/${dtst_id}` +
+                           `/phenotype/${pheno.xref_id}`));
+                      return `<a href="${url.toString()}" target="_blank">` +
+                          `${pheno.InbredSetCode}_${pheno.xref_id}` +
+                          `</a>`;
+                  }
+              },
+              {
+                  data: function(pheno) {
+                      return (pheno.Post_publication_description ||
+                              pheno.Original_description ||
+                              pheno.Pre_publication_description);
+                  }
+              }
+          ],
+          {
+              select: "multi+shift",
+              layout: {
+                  top1Start: {
+                      pageLength: {
+                          text: "Show _MENU_ of _TOTAL_"
+                      }
+                  },
+                  topStart: "info",
+                  top1End: null
+              },
+              rowId: function(pheno) {
+                  return `${pheno.InbredSetCode}_${pheno.xref_id}`;
+              }
+          });
+
+
+      $("#submit-frm-rerun-qtlreaper").on(
+          "click",
+          function(event) {
+              // (Re)run the QTLReaper script for selected phenotypes.
+              event.preventDefault();
+              var form = $("#frm-run-qtlreaper");
+              form.find(".dynamically-added-element").remove();
+              dtPhenotypesList.rows({selected: true}).nodes().each((node, index) => {
+                  _cloned = $(node).find(".chk-row-select").clone();
+                  _cloned.removeAttr("id");
+                  _cloned.removeAttr("class");
+                  _cloned.attr("style", "display: none;");
+                  _cloned.attr("data-type", "dynamically-added-element");
+                  _cloned.attr("class", "dynamically-added-element checkbox");
+                  _cloned.prop("checked", true);
+                  form.append(_cloned);
+              });
+              form.submit();
+          });
+  });
+</script>
+{%endblock%}
diff --git a/uploader/templates/populations/sui-view-population.html b/uploader/templates/populations/sui-view-population.html
index 6244f4d..a35eac6 100644
--- a/uploader/templates/populations/sui-view-population.html
+++ b/uploader/templates/populations/sui-view-population.html
@@ -73,76 +73,21 @@
          role="tabpanel"
          aria-labelledby="phenotypes-content-tab">
 
-      <div class="row" style="margin-top: 0.3em;">
-        <div class="col">
-          <a href="{{url_for('species.populations.phenotypes.add_phenotypes',
-                   species_id=species.SpeciesId,
-                   population_id=population.Id,
-                   dataset_id=dataset.Id)}}"
-             title="Upload phenotype data for population '{{population['Name']}}'"
-             class="btn btn-primary">Upload new Phenotypes</a>
-        </div>
-        <div class="col">
-          <a href="#"
-             title="List all existing publications for this population."
-             class="btn btn-primary not-implemented">view publications</a>
-          <!-- Maybe, actually filter publications by population? -->
-          <!-- Provide other features for publications on loaded page. -->
-        </div>
-      </div>
-
       <div class="row" style="margin-top: 1em;">
         <h3> Phenotypes in  Population "{{population.FullName}} ({{population.Name}})"</h3>
 
-        <p>The table below lists the phenotypes that already exist for
-          population "<em>{{population.FullName}} ({{population.Name}})</em>" of
-          species "<em>{{species.FullName}} ({{species.Name}})</em>".</p>
+        <p>To view existing phenotype traits, or upload new ones, click the button below:</p>
 
-        <div class="row phenotypes-list-actions">
-          <div class="col">
-            <form id="frm-recompute-phenotype-means"
-                  method="POST"
-                  action="{{url_for(
-                          'species.populations.phenotypes.recompute_means',
-                          species_id=species['SpeciesId'],
-                          population_id=population['Id'],
-                          dataset_id=dataset['Id'])}}">
-              <input id="submit-frm-recompute-phenotype-means"
-                     class="btn btn-info"
-                     type="submit"
-                     title="Compute/Recompute the means for selected phenotypes (or all phenotypes if none selected)."
-                     value="(Rec/C)ompute means" />
-            </form>
-          </div>
+        <div class="row">
           <div class="col">
-            <form id="frm-rerun-qtlreaper"
-                  method="POST"
-                  action="{{url_for(
-                          'species.populations.phenotypes.rerun_qtlreaper',
-                          species_id=species['SpeciesId'],
-                          population_id=population['Id'],
-                          dataset_id=dataset['Id'])}}">
-              <input id="submit-frm-rerun-qtlreaper"
-                     class="btn btn-info"
-                     type="submit"
-                     title="Run/Rerun QTLReaper for selected phenotypes (or all phenotypes if none selected)."
-                     value="(rer/r)un QTLReaper" />
-            </form>
+            <a href="{{url_for(
+                     'species.populations.phenotypes.list_datasets',
+                     species_id=species.SpeciesId,
+                     population_id=population.Id)}}"
+               title="View and upload phenotype traits"
+               class="btn btn-primary">Phenotypes</a>
           </div>
         </div>
-
-        <table id="tbl-phenotypes-list" class="table compact stripe cell-border">
-          <thead>
-            <tr>
-              <th></th>
-              <th>Index</th>
-              <th>Record</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-
-          <tbody></tbody>
-        </table>
       </div>
     </div>
 
@@ -179,89 +124,4 @@
 
 
 {%block javascript%}
-<script type="text/javascript" src="/static/js/urls.js"></script>
-
-<script type="text/javascript">
-  $(function() {
-      /** JS to build list of phenotypes table. **/
-      var species_id = {{species.SpeciesId}};
-      var population_id = {{population.Id}};
-      var dataset_id = {{dataset.Id}};
-      var dataset_name = "{{dataset.Name}}";
-      var data = {{phenotypes | tojson}};
-
-      var dtPhenotypesList = buildDataTable(
-          "#tbl-phenotypes-list",
-          data,
-          [
-              {
-                  data: function(pheno) {
-                      return `<input type="checkbox" name="selected-phenotypes" `
-                          + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" `
-                          + `value="${pheno.InbredSetCode}_${pheno.xref_id}" `
-                          + `class="chk-row-select" />`
-                  }
-              },
-              {data: "sequence_number"},
-              {
-                  data: function(pheno, type, set, meta) {
-                      var spcs_id = {{species.SpeciesId}};
-                      var pop_id = {{population.Id}};
-                      var dtst_id = {{dataset.Id}};
-                      var url = buildURLFromCurrentURL(
-                          (`/species/${spcs_id}` +
-                          `/populations/${pop_id}` +
-                          `/phenotypes/datasets/${dtst_id}` +
-                           `/phenotype/${pheno.xref_id}`));
-                      return `<a href="${url.toString()}" target="_blank">` +
-                          `${pheno.InbredSetCode}_${pheno.xref_id}` +
-                          `</a>`;
-                  }
-              },
-              {
-                  data: function(pheno) {
-                      return (pheno.Post_publication_description ||
-                              pheno.Original_description ||
-                              pheno.Pre_publication_description);
-                  }
-              }
-          ],
-          {
-              select: "multi+shift",
-              layout: {
-                  top1Start: {
-                      pageLength: {
-                          text: "Show _MENU_ of _TOTAL_"
-                      }
-                  },
-                  topStart: "info",
-                  top1End: null
-              },
-              rowId: function(pheno) {
-                  return `${pheno.InbredSetCode}_${pheno.xref_id}`;
-              }
-          });
-
-
-      $("#submit-frm-rerun-qtlreaper").on(
-          "click",
-          function(event) {
-              // (Re)run the QTLReaper script for selected phenotypes.
-              event.preventDefault();
-              var form = $("#frm-rerun-qtlreaper");
-              form.find(".dynamically-added-element").remove();
-              dtPhenotypesList.rows({selected: true}).nodes().each((node, index) => {
-                  _cloned = $(node).find(".chk-row-select").clone();
-                  _cloned.removeAttr("id");
-                  _cloned.removeAttr("class");
-                  _cloned.attr("style", "display: none;");
-                  _cloned.attr("data-type", "dynamically-added-element");
-                  _cloned.attr("class", "dynamically-added-element checkbox");
-                  _cloned.prop("checked", true);
-                  form.append(_cloned);
-              });
-              form.submit();
-          });
-  });
-</script>
 {%endblock%}
-- 
cgit 1.4.1