aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/static/main.js
diff options
context:
space:
mode:
authorPjotr Prins2020-07-17 11:08:15 +0100
committerPjotr Prins2020-07-17 11:08:15 +0100
commit16bb5df907c79cd0ce6bea0015821a2ce51fb992 (patch)
treeddb9677cddcc463bb514300189cbd4300b9117ed /bh20simplewebuploader/static/main.js
parent0be9983ef88fd3b925d8fa53e7f9ab2a28703bc0 (diff)
parentc69046ee9a5e24eadcd8cb885633328b0fd88011 (diff)
downloadbh20-seq-resource-16bb5df907c79cd0ce6bea0015821a2ce51fb992.tar.gz
bh20-seq-resource-16bb5df907c79cd0ce6bea0015821a2ce51fb992.tar.lz
bh20-seq-resource-16bb5df907c79cd0ce6bea0015821a2ce51fb992.zip
Merge branch 'master' into ebi-submit
Diffstat (limited to 'bh20simplewebuploader/static/main.js')
-rw-r--r--bh20simplewebuploader/static/main.js151
1 files changed, 46 insertions, 105 deletions
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index 751e478..1633c25 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -13,70 +13,41 @@ function myFunction() {
}
}
-let map = L.map( 'map', {
- center: [37.0902, -95.7129], // Default to U.S.A
- minZoom: 3,
- zoom: 0
-});
-L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
- subdomains: ['a','b','c']
-}).addTo( map );
-
-let markers = L.markerClusterGroup().addTo(map)
-
-
function fetchAPI(apiEndPoint) {
- fetch(scriptRoot + apiEndPoint)
- .then(response => {
- return response.json();
- })
- .then(data => {
- console.log(data);
- markers.clearLayers();
- document.getElementById("results").classList.remove("invisible");
- document.getElementById("loader").classList.add("invisible");
- if (!(apiEndPoint === "/api/getAllaccessions")) {
- for (let i = 0; i < data.length; i++) {
- let {"count": fastaCount, GPS, LocationLabel: label } = data[i];
- let coordinates = GPS.split(" ");
- if (!(coordinates == null)) {
- let lat, lon;
- [lon, lat] = coordinates.map(parseFloat);
- let point = L.point()
- let marker = L.marker([lat, lon]);
- marker.bindPopup("<b>" + label + "</b><br/>" + "FastaCount: " +fastaCount);
- markers.addLayer(marker)
- }}
- }
- // Reload the map
- map.invalidateSize();
- });
- document.getElementById("results").classList.add("invisible");
- document.getElementById("loader").classList.remove("invisible");
-
-}
-
-// Copy from function above but now added as table instead of plain json
-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");
+ fetch(scriptRoot + apiEndPoint)
+ .then(response => {
+ return response.json();
+ })
+ .then(data => {
+ console.log(data);
+ });
+ document.getElementById("map_view").classList.add("invisible");
+ document.getElementById("loader").classList.remove("invisible");
+}
+
+// Copy from function above but now output HTML table instead of plain json
+function fetchHTMLTable(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>"
+ }
+*/
+ for (var i=0; i<data.length;i++) {
+ htmlString=htmlString+"<tr><td>"+data[i]["label"]+"</td><td>"+data[i]["count"]+"<td></tr>"
+ }
+ htmlString=htmlString+"</table>"
+
+ document.getElementById("table").innerHTML = htmlString
+ });
}
@@ -85,36 +56,39 @@ let search = () => {
fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
}
+// Get count from Arvados
let fetchCount = () => {
fetchAPI("/api/getCount");
}
+// Get count from Virtuoso
let fetchCountDB = () => {
fetchAPI("/api/getCountDB");
}
let fetchSEQCountBySpecimen = () => {
- fetchAPIV2("/api/getSEQCountbySpecimenSource");
+ fetchHTMLTable("/api/getSEQCountbySpecimenSource");
}
let fetchSEQCountByLocation = () => {
- fetchAPIV2("/api/getSEQCountbyLocation");
+ fetchHTMLTable("/api/getSEQCountbyLocation");
}
let fetchSEQCountByTech = () => {
- fetchAPIV2("/api/getSEQCountbytech");
+ fetchHTMLTable("/api/getSEQCountbytech");
}
let fetchAllaccessions = () => {
- fetchAPI("/api/getAllaccessions");
+ fetchHTMLTable("/api/getAllaccessions");
};
-let fetchCountByGPS = () => {
- fetchAPI("/api/getCountByGPS");
+let fetchMap = () => {
+ fetchAPI("/api/getCountByGPS");
+ updateMapMarkers();
};
let fetchSEQCountbyLocation = () => {
- fetchAPIV2("/api/getSEQCountbyLocation");
+ fetchHTMLTable("/api/getSEQCountbyLocation");
};
let fetchSEQByLocation = () => {
@@ -122,7 +96,7 @@ let fetchSEQByLocation = () => {
};
let fetchSEQCountbyContinent = () => {
- fetchAPIV2("/api/getSEQCountbyContinent");
+ fetchHTMLTable("/api/getSEQCountbyContinent");
}
@@ -195,7 +169,7 @@ function addField(e) {
// Increment the number and use the keypath and number to set IDs and cross
// references.
// TODO: Heavily dependent on the form field HTML. Maybe we want custom
- // elements for the labeled controlsd that know how to be list items?
+ // elements for the labeled controls that know how to be list items?
fieldNumber++
newField.dataset.number = fieldNumber
let newID = keypath + '[' + fieldNumber + ']'
@@ -252,36 +226,3 @@ function on_submit_button() {
return false;
}
}
-
-
-
-//
-
-function drawMap(){
-
-// initialize the map on the "map" div with a given center and zoom
-var mymap = L.map('mapid').setView([51.505, -0.09], 1);
-
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-}).addTo(mymap);
-
-fetch(scriptRoot + "api/getCountByGPS")
- .then(response => {
- console.log(response)
- return response.json();
- })
- .then(data => {
-
- for (var i=0; i<data.length;i++) {
- gps=data[i]["GPS"].split(" ")
- var circle = L.circle([gps[1], gps[0]], {
- color: 'red',
- fillColor: '#f03',
- fillOpacity: 0.5,
- radius: parseInt(data[i]["count"]) //not working for whatever reason
- }).addTo(mymap);
- }
-
- });
-}