From c5398c826edc5cbfa1a87466c63b48b74dee867f 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/static/js/explore.esm.js   | 10 +++++++++-
 hub/templates/hub/explore.html |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

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..06c394c06 100644
--- a/hub/templates/hub/explore.html
+++ b/hub/templates/hub/explore.html
@@ -135,6 +135,11 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 3: Add extra columns
                             <div class="d-flex">
                                 <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 :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>
                     </div>