diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 21 | ||||
| -rw-r--r-- | bh20simplewebuploader/static/main.js | 30 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/demo-run.html | 15 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/demo.html | 4 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/footer.html | 4 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/header.html | 19 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/search.html | 6 |
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: '© <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> + |