From 87eb010fdeaeb2f7db7b5cccbb618e9038d4f884 Mon Sep 17 00:00:00 2001
From: Struan Donald <struan@exo.org.uk>
Date: Mon, 4 Dec 2023 17:28:12 +0000
Subject: [PATCH] WIP displaying data set columns

---
 hub/mixins.py                  |  6 +++++-
 hub/static/js/explore.esm.js   | 10 +++++++++-
 hub/templates/hub/explore.html |  5 +++++
 hub/tests/test_views.py        |  6 +++---
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/hub/mixins.py b/hub/mixins.py
index bb891529a..04dd531a0 100644
--- a/hub/mixins.py
+++ b/hub/mixins.py
@@ -88,6 +88,7 @@ def columns(self, mp_name=False):
                         "name": dataset.name,
                         "value_col": dataset.value_col,
                         "label": dataset.label,
+                        "header_label": dataset.label,
                     }
                 )
             except DataSet.DoesNotExist:
@@ -99,6 +100,7 @@ def columns(self, mp_name=False):
                             "name": datatype.name,
                             "value_col": datatype.value_col,
                             "label": datatype.label,
+                            "header_label": f"{datatype.data_set.label} - {datatype.label}",
                         }
                     )
                 except DataType.DoesNotExist:
@@ -130,7 +132,9 @@ def format_value(self, type, value):
     def data(self, as_dict=False, mp_name=False):
         headers = ["Constituency Name"]
         headers += map(lambda f: f["dataset"].label, self.filters())
-        headers += map(lambda f: f["label"], self.columns(mp_name=mp_name))
+        headers += map(
+            lambda f: f.get("header_label", f["label"]), self.columns(mp_name=mp_name)
+        )
 
         data = [headers]
 
diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
index b450a3c2c..77f53a940 100644
--- a/hub/static/js/explore.esm.js
+++ b/hub/static/js/explore.esm.js
@@ -180,6 +180,10 @@ const app = createApp({
     addColumn(datasetName) {
       const dataset = this.getDataset(datasetName)
 
+      if (!dataset.selectedType && dataset.types) {
+        dataset.selectedType = dataset.types[0].name
+      }
+
       this.columns.push(dataset)
 
       trackEvent('explore_column_added', {
@@ -238,7 +242,11 @@ const app = createApp({
       if (this.columns.length) {
         var cols = []
         this.columns.forEach(function(d) {
-          cols.push(d.name)
+          if (d.selectedType) {
+            cols.push(d.selectedType)
+          } else {
+            cols.push(d.name)
+          }
         })
 
         state['columns'] = cols.join(',')
diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
index 452b5f238..f928bfe42 100644
--- a/hub/templates/hub/explore.html
+++ b/hub/templates/hub/explore.html
@@ -136,6 +136,11 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 3: Add extra columns
                                 <h3 class="h6 mb-0 me-auto">${ column.title }</h3>
                                 <button @click="removeColumn(column.name)" type="button" class="btn-close p-0" aria-label="Remove column"></button>
                             </div>
+                            <div :class="{ 'filter__body': true, 'filter__body--expanded': true }">
+                                <select v-if="column.is_range" v-model="column.selectedType" class="form-select form-select-sm flex-grow-0 flex-shrink-1">
+                                <option v-for="ds_type in column.types" :value="ds_type.name">${ ds_type.title }</option>
+                                </select>
+                            </div>
                         </div>
                     </div>
 
diff --git a/hub/tests/test_views.py b/hub/tests/test_views.py
index ae66a6863..72cb87319 100644
--- a/hub/tests/test_views.py
+++ b/hub/tests/test_views.py
@@ -79,7 +79,7 @@ def test_explore_view_with_many_to_one(self):
 
     def test_explore_view_extra_column(self):
         output_csv = str.encode(
-            "Constituency Name,APPG membership,Wind support\r\nSouth Borsetshire,MadeUpAPPG; MadeUpAPPG2,70.0\r\n"
+            "Constituency Name,APPG membership,Constituency Polling Data - Wind support\r\nSouth Borsetshire,MadeUpAPPG; MadeUpAPPG2,70.0\r\n"
         )
 
         url = f"{reverse('explore_csv')}?mp_appg_membership__exact=MadeUpAPPG&columns=wind_support"
@@ -92,7 +92,7 @@ def test_explore_view_extra_column(self):
 
     def test_explore_view_multiple_extra_columns(self):
         output_csv = str.encode(
-            "Constituency Name,APPG membership,Wind support,Constituency Fuel Poverty\r\nSouth Borsetshire,MadeUpAPPG; MadeUpAPPG2,70.0,12.4321\r\n"
+            "Constituency Name,APPG membership,Constituency Polling Data - Wind support,Constituency Fuel Poverty - Constituency Fuel Poverty\r\nSouth Borsetshire,MadeUpAPPG; MadeUpAPPG2,70.0,12.4321\r\n"
         )
 
         url = f"{reverse('explore_csv')}?mp_appg_membership__exact=MadeUpAPPG&columns=wind_support,fuel_poverty"
@@ -105,7 +105,7 @@ def test_explore_view_multiple_extra_columns(self):
 
     def test_explore_view_extra_columns_multiset(self):
         output_csv = str.encode(
-            "Constituency Name,APPG membership,Wind support,Constituency Age 0-9 %age\r\nSouth Borsetshire,MadeUpAPPG; MadeUpAPPG2,70.0,10.1234\r\n"
+            "Constituency Name,APPG membership,Constituency Polling Data - Wind support,Constituency Age Distribution - Constituency Age 0-9 %age\r\nSouth Borsetshire,MadeUpAPPG; MadeUpAPPG2,70.0,10.1234\r\n"
         )
 
         url = f"{reverse('explore_csv')}?mp_appg_membership__exact=MadeUpAPPG&columns=wind_support,ages_0-9"