Tried to make a start with the 'demo' part, table works, drilling down not

3 files changed, 61 insertions, 20 deletions

diff --git a/bh20simplewebuploader/main.py b/bh20simplewebuploader/main.py
index 851d8d5..b67e1bf 100644
--- a/bh20simplewebuploader/main.py
+++ b/bh20simplewebuploader/main.py
@@ -539,9 +539,9 @@ def getSEQCountbytech():
     payload = {'query': query, 'format': 'json'}
     r = requests.get(baseURL, params=payload)
     result = r.json()['results']['bindings']
-    return jsonify([{'Fasta Count': x['fastaCount']['value'],
-                     'tech': x['tech']['value'],
-                     'Label': x['tech_label']['value']} for x in result])
+    return jsonify([{'count': x['fastaCount']['value'],
+                     'key': x['tech']['value'],
+                     'label': x['tech_label']['value']} for x in result])
 
 ## List all Sequences/submissions by a given tech, as example e.g. http://purl.obolibrary.org/obo/OBI_0000759
 ## Has to be encoded again so should be --> http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FOBI_0000759
@@ -582,9 +582,9 @@ def getSEQCountbyLocation():
     payload = {'query': query, 'format': 'json'}
     r = requests.get(baseURL, params=payload)
     result = r.json()['results']['bindings']
-    return jsonify([{'Fasta Count': x['fastaCount']['value'],
-                     'GeoLocation': x['geoLocation']['value'],
-                     'GeoLocation Label': x['geoLocation_label']['value']} for x in result])
+    return jsonify([{'count': x['fastaCount']['value'],
+                     'key': x['geoLocation']['value'],
+                     'label': x['geoLocation_label']['value']} for x in result])
 
 
 @app.route('/api/getSEQCountbySpecimenSource', methods=['GET'])
@@ -599,9 +599,9 @@ def getSEQCountbySpecimenSource():
     payload = {'query': query, 'format': 'json'}
     r = requests.get(baseURL, params=payload)
     result = r.json()['results']['bindings']
-    return jsonify([{'Fasta Count': x['fastaCount']['value'],
-                     'Specimen Source': x['specimen_source']['value'],
-                     'Label': x['specimen_source_label']['value']} for x in result])
+    return jsonify([{'count': x['fastaCount']['value'],
+                     'key': x['specimen_source']['value'],
+                     'label': x['specimen_source_label']['value']} for x in result])
 
 # Example specimen http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FNCIT_C155831
 @app.route('/api/getSEQbySpecimenSource', methods=['GET'])
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index 9373199..d90b5af 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -28,6 +28,28 @@ function fetchAPI(apiEndPoint) {
 
 }
 
+function fetchAPIV2(apiEndPoint) {
+  fetch(scriptRoot + apiEndPoint)
+    .then(response => {
+      return response.json();
+    })
+    .then(data => {
+      console.log(data)
+       htmlString="<table>"
+
+       // Depending on what we want to explore we'd have to call a different function ....? But how to Include that?
+       for (var i=0; i<data.length;i++) {
+            htmlString=htmlString+"<tr><td><a href='#' onclick='fetchSEQByLocation(\""+data[i]["key"]+"\");'>"+data[i]["label"]+"</a></td><td>"+data[i]["count"]+"<td></tr>"
+       }
+       htmlString=htmlString+"</table>"
+
+      document.getElementById("table").innerHTML = htmlString
+    });
+
+  document.getElementById("results").classList.add("invisible");
+}
+
+
 let search = () => {
   let m =  document.getElementById('search-input').value;
   fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
@@ -37,22 +59,36 @@ let fetchCount = () => {
   fetchAPI("/api/getCount");
 }
 
-let fetchSEQBySpecimen = () => {
-  fetchAPI("/api/getSEQCountbySpecimenSource");
+let fetchSEQCountBySpecimen = () => {
+  fetchAPIV2("/api/getSEQCountbySpecimenSource");
 }
 
-let fetchSEQByLocation = () => {
-  fetchAPI("/api/getSEQCountbyLocation");
+let fetchSEQCountByLocation = () => {
+  fetchAPIV2("/api/getSEQCountbyLocation");
 }
 
-let fetchSEQByTech = () => {
-  fetchAPI("/api/getSEQCountbytech");
+let fetchSEQCountByTech = () => {
+  fetchAPIV2("/api/getSEQCountbytech");
 }
 
 let fetchAllaccessions = () => {
   fetchAPI("/api/getAllaccessions");
 };
 
+let fetchCountByGPS = () => {
+  fetchAPI("/api/getCountByGPS");
+};
+
+let fetchSEQCountbyLocation = () => {
+  fetchAPIV2("/api/getSEQCountbyLocation");
+};
+
+let fetchSEQByLocation = () => {
+  console.log("Missing - set parameter for request, retrieve data")
+};
+
+
+
 /*
  * Make sure that only one of the manual metadata entry and metadata upload
  * form components is *actually* a child of the form element in the DOM.
diff --git a/bh20simplewebuploader/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html
index 52129ec..4479409 100644
--- a/bh20simplewebuploader/templates/demo-run.html
+++ b/bh20simplewebuploader/templates/demo-run.html
@@ -1,12 +1,13 @@
 <section class="search-section">
   <div class="filter-options" action="#">
     <p>[Demo] Display content sequences by: </p>
-
     <div>
-      <button class="button" onclick="fetchSEQBySpecimen()">Specimen source</button>
-      <button class="button" onclick="fetchSEQByLocation()">Location</button>
-      <button class="button" onclick="fetchSEQByTech()">Sequencer</button>
-      <button class="button" onclick="fetchAllaccessions()">All accessions</button>
+      <button class="button" onclick="fetchSEQCountBySpecimen()">Count by Specimen source</button>
+      <button class="button" onclick="fetchSEQCountByLocation()">Count by Location</button>
+      <button class="button" onclick="fetchSEQCountByTech()">Count by Sequencer</button>
+      <button class="button" onclick="fetchAllaccessions()">Show All accessions</button>
+      <button class="button" onclick="fetchCountByGPS()">Map</button>
+
     </div>
 
   </div>
@@ -18,4 +19,8 @@
     <pre><code id="json"></code></pre>
   </section>
 
+
 </section>
+ <section>
+    <div id="table"></div>
+  </section>