aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--bh20simplewebuploader/static/main.css21
-rw-r--r--bh20simplewebuploader/static/main.js30
-rw-r--r--bh20simplewebuploader/templates/demo-run.html15
-rw-r--r--bh20simplewebuploader/templates/demo.html4
-rw-r--r--bh20simplewebuploader/templates/footer.html4
-rw-r--r--bh20simplewebuploader/templates/header.html19
-rw-r--r--bh20simplewebuploader/templates/search.html6
7 files changed, 68 insertions, 31 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index cadb9a5..5a9f231 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -47,6 +47,11 @@ h2 > svg {
float: right;
}
+#map {
+ width: 800px;
+ height: 440px;
+ border: 1px solid #AAA;
+}
/* ---- start menu ---- */
/* Add a black background color to the top navigation */
@@ -227,17 +232,6 @@ a {
column-width: 250px;
}
-pre code {
- background-color: #eee;
- display: flex;
- width: max-content;
- margin: 0 auto;
- overflow-y: scroll;
- max-height: 300px;
- padding: 10px;
- border: solid 1px black;
-}
-
.record, .record .field-group, .record .field-group .field {
display: flex;
flex-direction: column;
@@ -261,12 +255,15 @@ pre code {
.search-section {
display: flex;
justify-content: space-between;
+ width: max-content;
}
+.filter-options {
+ width: 100%;
+}
.search-section .filter-options {
display: flex;
flex-direction: column;
- width: max-content;
padding: 20px;
}
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index efefe70..f2e5d99 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -13,15 +13,43 @@ 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 => {
- document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);
+ 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 {"Fasta Count": fastaCount, GPS, LocationLabel: label } = data[i];
+ let coordinates = GPS.match(/Point\((-?[0-9]+(?:.(?:[0-9]+)?)?) (-?[0-9]+(?:.(?:[0-9]+)?)?)\)/);
+ if (!(coordinates == null)) {
+ let lat, lon;
+ [lon, lat] = coordinates.slice(1, 3).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");
diff --git a/bh20simplewebuploader/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html
index a80281c..a8f9edc 100644
--- a/bh20simplewebuploader/templates/demo-run.html
+++ b/bh20simplewebuploader/templates/demo-run.html
@@ -13,15 +13,14 @@
</div>
- <div id="loader" class="loader invisible">
- </div>
-
- <section id="results" class="invisible">
- <pre><code id="json"></code></pre>
- </section>
-
+</section>
+<div id="loader" class="loader invisible">
+</div>
+<section id="results" class="invisible">
+ <div id="map"></div>
</section>
+
<section>
<div id="table"></div>
- </section>
+ </section>
diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html
index d9ebae2..76c19c4 100644
--- a/bh20simplewebuploader/templates/demo.html
+++ b/bh20simplewebuploader/templates/demo.html
@@ -6,9 +6,6 @@
{% include 'menu.html' %}
{% include 'search.html' %}
{% include 'demo-run.html' %}
-
- WIP
-
{% include 'footer.html' %}
<script type="text/javascript">
@@ -25,7 +22,6 @@
span.appendChild(txt);
});
});
-
</script>
</body>
diff --git a/bh20simplewebuploader/templates/footer.html b/bh20simplewebuploader/templates/footer.html
index 0218278..9326b1e 100644
--- a/bh20simplewebuploader/templates/footer.html
+++ b/bh20simplewebuploader/templates/footer.html
@@ -1,5 +1,4 @@
<br>
-</p>
<section class="footer">
<div class="about">
<div>
@@ -40,4 +39,5 @@
</small>
</center>
</div>
-</class>
+</section>
+<script type="text/javascript" src="/static/main.js"></script>
diff --git a/bh20simplewebuploader/templates/header.html b/bh20simplewebuploader/templates/header.html
index 5c0e1a0..0ac5157 100644
--- a/bh20simplewebuploader/templates/header.html
+++ b/bh20simplewebuploader/templates/header.html
@@ -3,8 +3,25 @@
<link href="/static/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>COVID-19 PubSeq: Public SARS-CoV-2 Sequence Resource</title>
- <script type="text/javascript" src="/static/main.js"></script>
{% if blog %}
<link rel="Blog stylesheet" type="text/css" href="/static/blog.css" />
{% endif %}
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+ integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+ crossorigin=""/>
+ <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
+ integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
+ crossorigin=""/>
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
+ integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
+ crossorigin=""/>
+
+ <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+ integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+ crossorigin=""></script>
+
+ <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
+ integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
+ crossorigin=""></script>
</head>
diff --git a/bh20simplewebuploader/templates/search.html b/bh20simplewebuploader/templates/search.html
index 1257ee2..dbdca90 100644
--- a/bh20simplewebuploader/templates/search.html
+++ b/bh20simplewebuploader/templates/search.html
@@ -1,10 +1,10 @@
<div class="search">
- <input id="search-input" id="global-search" type="search" placeholder="FASTA uri" required>
+ <input id="search-input" type="search" placeholder="FASTA uri" required>
<button class="button search-button" type="submit" onclick="search()">
<span class="icon ion-search">
<span class="sr-only">Search</span>
</span>
</button>
- <span class="dropt" title="http://collections.lugli.arvadosapi.com/c=00fede2c6f52b053a14edca01cfa02b7+126/sequence.fasta">(example)<span style="width:500px;"></span>
+ <span class="dropt" title="http://collections.lugli.arvadosapi.com/c=00fede2c6f52b053a14edca01cfa02b7+126/sequence.fasta">(example)<span style="width:500px;"></span></span>
</div>
-</section>
+